13 Answers. According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size. As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. That page has statements like "content-box gives you the default CSS box-sizing behavior." and "content-box This is the initial and default value as specified by the CSS standard.", which seem to contradict with your "It explicitly mentioned in MDN that border-box is the default for box-sizing in the docs". – separate. Borders are separated; each cell will display its own borders. This is default. Demo . collapse. Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect) Demo . initial. Sets this property to its default value. 2 Answers. It says: "Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline." When you set an outline it should NOT be affected by 如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。. 这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。. 当我们实现响应式布局时，这个特点尤其烦人。. box-sizing 属性可以 About External Resources. You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. box-sizing: border-box. Meaning of width means from border to border. The default behavior is called CSS Box Model. Normally, width means the content of a element. If you add padding and border, the result width from border to border will be bigger than the width value you used. Suppose you have 2 div each has width: 50%. The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element Originally, flex-basis:auto meant "look at my width or height property". Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in Firefox bug 1032922. Then, that change was reverted in Firefox bug 1093316, so auto once again means "look The plugin is adding global wild card css that changes all elements in each other plugin and theme to box-sizing: border-box. It is done in the ep-helpers.css and has the following css. *, *::before, *::after {box-sizing:border-box}. The css sets every element as well as each elements before and after pseudo classes (*, *::before oC1k.