HTML and CSS Reference
In-Depth Information
Controlling the box model
One of the more difficult aspects of layout in the late 1990s was the
incompatible implementation of the
CSS
box model. Some browsers
behaved as if the width and the height included the border, whereas the
specification excluded the border and padding from width and height
calculations.
box-sizing: content-box;
box-sizing: border-box;
Full
Partial
In spite of it being nonstandard, many
people felt that the method of
calculating width that included the
border was more intuitive. So in CSS3
you can specify the sizing calculation
you want with the
box-sizing
property.
The two alternatives are shown next.
10.0
1.0
-
2.0
8.0
-
9.5
-
5.1
3.1
