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.
Search WWH ::




Custom Search