HTML and CSS Reference
In-Depth Information
1.
Add a
margin
declaration to the
#newsletter
rule set:
margin-left: -4px;
2.
Save styles.css.
By giving the newsletter box a left margin of
-4px
, you forcefully pull it over to the left to balance out the space,
making each side 36px. You may feel a little strange doing that. It kind of feels as though you are forcefully yanking
the newsletter box back over to the left—fighting against the browser. As you gain experience with CSS, though,
you'll find that from time to time these little “hacks” give you the control you need to make everything look perfect.
box-sizing
Initial value:
content-box
| Inherited: No | Applies to: All elements that accept width and height | CSS3
Unprefixed browser support: IE 8+, Chrome 9+, Opera 7+, Safari 5.1+
Prefixed browser support: Firefox 1+, Chrome 1+, Safari 3+
The
box-sizing
property, which was introduced in CSS Level 3, gives web page creators the choice
of how they want the box model to work. The initial value for
box-sizing
is
content-box
, which has been
used throughout
CSS3 Foundations
up to this point and is the described box model in this chapter.
In a nutshell, with
box-sizing
set to
content-box
, when you are specifying a width and height, those proper-
ties are applied to the content area of an element, and then the padding and border are applied outside those dimen-
sions, as shown in Figure 7-7.
Figure 7-7
The way the areas of the box model are laid out when the box-sizing is content-box.
By changing the
box-sizing
to
border-box
, you, like me, may find the box model easier to work with. Before
I explain, remember that
box-sizing
works in all modern browsers, as well as Internet Explorer 8, but not ver-
sions 6 and 7. For this reason, you use
box-sizing: border-box;
for only a few elements that don't need to
be perfect in older versions of Internet Explorer.
border-box
applies padding and borders inside an element with a specified width and height, as shown in Figure
7-8.