HTML and CSS Reference
In-Depth Information
Name
box-sizing
Values:
content-box
|
border-box
Initial value:
content-box
Applies to:
All elements that accept the
width
or
height
properties
Inherited:
No
Computed value:
Same as declared value
Description:
Defines whether the
height
and
width
of the element define the dimensions of the content
box (the historical behavior) or the border box. If the latter, the value of
width
defines the dis-
tance from the left outer border edge to the right outer border edge; similarly,
height
defines
the distance from the top outer border edge to the bottom outer border edge. Any padding or
border widths are “subtracted” from those dimensions instead of the historical “additive” be-
havior. Thus, given:
body {box-sizing: border-box; width: 880px;
padding: 0 20px;}
…the final width of the content area will be 840 pixels (880-20-20).
Examples:
body {box-sizing: border-box;}
