Finally, if only one value is supplied
{margin:12px;}
then all four sides are set to this value.
Using this shorthand, you can??™t just specify bottom and left without providing some values to top and right, even if those
values are both zero. In such a case, you can write 0 without supplying a value type like this
{border:0 0 2px 4px;}
STYLIN??™ WITH CSS - CHAPTER 4 106
a background color so that the box??™s area is visible, but the box does
not change size.
The Box Padding
Padding adds space between the box??™s content and the border of the
box. As part of the inside of the box, it takes on the color of the box??™s
background. Figure 4.5 shows two paragraphs, one with and one
without padding.
FIGURE 4.5 If you display an element??™s
border, you will almost always
add padding to prevent the content
from touching it.
Where designers once used table cell padding and spacer GIFs,
which added lots of extra presentational markup, you can now
achieve the same effect economically by adding CSS padding styles.
The Box Margins
Margins are slightly more complex than borders and padding. First,
most block level elements (paragraphs, headings, lists, and so on)
have default margins, as we saw earlier in the chapter.
In Figure 4.6, you can see a heading and two paragraphs displayed
three times. The ?¬? rst example shows the heading and two paragraphs
as they appear by default.
Pages:
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149