8 shows a 400-pixel-wide element with background color on.
FIGURE 4.8 By setting the width
property, the element does not
default to the width of the containing
element. In this case, the containing
element is the body element,
which by default is the width of the
browser window.
Without any padding, the content is this width also, and it touches
the sides of the box. That makes perfect sense, but this logic goes
STYLIN??™ WITH CSS - CHAPTER 4 110
out the window when you start adding padding and borders. Let??™s
add a padding of 20 pixels to each side of the content, like this
p {width:400px; background-color:#EEE; padding:0 20px;}
You might expect that if you pad a 400-pixel-wide box by 40 pixels,
the content gets squeezed down to 360 pixels, but you would be
wrong. Instead, in the wonderful, wacky world of CSS, the box gets
bigger by 40 pixels (Figure 4.9).
FIGURE 4.9 Adding padding causes
the box to get wider.
If you then add a 6-pixel border to the right and left sides of the box
p {width:400px; margin: 0; padding:0 20px; border:#000 solid;
border-width: 0 6px 0 6px; background-color:#CCC;}
the box grows wider by 12 pixels (Figure 4.10). Now the original
400-pixel-wide box is a total of 452 pixels wide (6 + 20 + 400 + 20
+ 6 = 452).
FIGURE 4.10 Adding borders causes
the box to grow even wider.
Let??™s now add right and left margins to create space around the sides
of the element (Figure 4.
Pages:
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153