HTML and CSS Reference
In-Depth Information
Although the width of the
.box
element is defined explicitly as 400px, the actual width of
the element will end up being 440px, because the left and right padding add to the width.
Foralongtimethishasbeenanirritationthatwe'velearnedtodealwithinCSSlayouts.With
the
box-sizing
property, however, we can tell the browser to render all of our widths and
heights at an exact pixel size, including any borders or padding settings. That is, if we define
an explicit width or height, padding and borders will not affect that width and height.
We're going to add this property to the top of our custom styles, using the universal selector:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The three lines of code you see here are exactly the same, but because some browsers' sup-
port for these properties is “experimental,” we're forced to use vendor prefixes (the
-web-
kit-
and
-moz-
prefixes in this example) for maximum browser compatibility. We'll talk
more about vendor prefixes in
Chapter 5
.
Withthisdeclaration inplace,wecanfeelfreetoaddpaddingand/orborderstoanyelements,
and we won't have to recalculate their specified widths for them to lay out correctly. Let's do
that now by adding some padding to the
.latest
element (which is our left column):
.latest {
width: 640px;
float: left;
padding: 0 40px;
}
If we had added this padding prior to adding the
box-sizing
declarations, the left column
would no longer fit next to the right column inside of
.main
. But, by using
box-sizing
,
we prevent the padding from adding to the overall width of the column.
