HTML and CSS Reference
In-Depth Information
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 (
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.
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.
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;
Search WWH ::

Custom Search