HTML and CSS Reference
In-Depth Information
■
Tip
The default values of padding and borders are zero, so you don't need to declare them.
he
box-sizing
property is not inherited, so you can apply it to individual elements. Alternatively, you can
apply it to all elements using the universal selector like this:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Opera 7+ and IE 8+ support
box-sizing
without a prefix—as do the most recent versions of Safari and
Chrome—but you need the
-moz-
and
-webkit-
prefixes for cross-browser support.
In early 2012, Paul Irish, one of the most influential front-end web developers, publicly endorsed this
technique to avoid dealing with the complexities of the standard box model (
http://paulirish.com/2012/
box-sizing-border-box-ftw/
). However, it's not a perfect solution. The main problems with setting
box-sizing
to
border-box
are as follows:
box-sizing
property is not supported by IE 6 and IE 7. If a significant proportion of
visitors to your sites use either of these browsers, your design will break.
•
he
min-height
and
max-height
when
•
Some browsers, notably Firefox, don't support
box-sizing
is set to
border-box
.
■
Fashions in web development come and go. My instinct is to stick with the standard box model while
problems remain with the implementation of
box-sizing
with
border-box
. Throughout the rest of this topic, i use
the standard box model.
Note
Using Margins to Improve Page Layout
CSS allows you to adjust the margins on each side of every element individually, giving you considerable control
over horizontal and vertical space between elements. When used in combination with the
float
property, which
you'll learn about in the next chapter, margins are one of the most important tools in current page layout. In this
section, I'll describe some of the most common uses of margins.
Removing the Default Margin from Your Pages
As you saw in the preceding exercise, browsers add an eight-pixel margin around the
<body>
element (see
Figure
6-4
). Most of the time, this default margin is unimportant, but it does make a difference if you want to use
images that go right to the edge of the page. Older versions of Opera used padding on the
<body>
element instead
of a margin, so it's become standard practice to remove the default space by setting the value of both properties
to zero like this:
body {
margin: 0;
padding: 0;
}
