How Mozilla defines box-sizing

The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements.

In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height you have to adjust the value you give to allow for any border or padding that may be added. This is especially tricky when implementing a responsive design.

The box-sizing property can be used to adjust this behavior:

  1. content-box is the default, and gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width.

  2. border-box tells the browser to account for any border and padding in the value you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Some experts recommend that web developers should consider routinely applying box-sizing: border-box to all elements.

/* Keyword values */ box-sizing: content-box; box-sizing: border-box;

/* Global values */ box-sizing: inherit; box-sizing: initial; box-sizing: unset;

How Bootstrap 4.0 defines this::

The < html > and < body > elements are updated to provide better page-wide defaults. More specifically:

  • The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.

    • No base font-size is declared on the < html >, but 16px is assumed (the browser default). font-size: 1rem is applied on the < body > for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
  • The < body > also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.

  • For safety, the < body > has a declared background-color, defaulting to #fff

Browser Support The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property -- box-sizing
Chrome -- 10.0 4.0 -webkit-
Internet Explorer -- 8.0
Firefox -- 29.0 2.0 -moz- Safari -- 5.1 3.2 -webkit-
Oper -- 9.5

Reference:: * * **

165 0 1