HTML and CSS Reference
In-Depth Information
additional
div
s simply to add padding or borders is not a great sin. But in
complicated designs, the number of extra
div
s can really add up, which
adds to both your development time and the file size of the HTML and CSS.
Setting the new
box-sizing
property to
border-box
instead of
content-box
solves this problem so you can get rid of all those extra
div
s. When a box is using the border-box box model, the browser will
subtract
the padding and border from the width of the box instead of adding
it. You always know that the total space the box takes up equals the width
value you've declared.
In the traditional box model (bottom image), padding and border are added onto
the declared width. By setting
box-sizing
to
border-box
(top image), the
padding and border are subtracted from the declared width.
