Today’s browsers use width \(+\) padding \(+\) border to calculate the actual width and height of their CSS Box Model. However, this box model is modifiable using CSS’s box-sizing.
box-sizing has three possible values:
-
content-box: the default. Width and height values apply to the element’s content only. The padding and border are added to the outside of the box to get the size of the visible box. -
padding-box: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. CSS standard deprecates this setting; do not use. -
border-box: the most popular. Width and height values apply to the content, padding, and border. The browser interprets thewidthandheightproperties as the total actual width and height of the box (excluding margins).
The last one makes it possible to revive the “quirky” interpretation of the box model, one of only thing Internet Explorer seems to have done right, because it greatly simplify the math a front-end developer must do: 50% of the container width is always 50% even with a 20px padding.
border-box is commonly used in reset stylesheet, in order to make it the default behavior, as it’s easier to make “fluid” or responsive design with this value.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}