75em 30px;}
In this example, the space between the paragraphs is always threequarters
of the height of the text; if you increase the overall type size
STYLIN??™ WITH CSS - CHAPTER 4 108
in the body tag, not only does the paragraphs??™ text get bigger, but the
space between the paragraphs also increases proportionately. The
left and right margins, set in pixels, remain unchanged. We??™ll look
at this concept further when we start constructing page layouts in
Chapter 5.
Collapsing Margins
Say the following aloud: ???Vertical margins collapse.??? You need to
remember this important fact. Let me explain what this means and
why it??™s important. Imagine that you have three paragraphs, one
after the other, and each is styled with this rule
p {width:400px; height:50px; border:1px solid #000;
margin-top:50px; margin-bottom:30px; background-color:#CCC;}
Because the bottom margin of the ?¬? rst paragraph is adjacent to
the top margin of the second, you might reasonably assume that
there are 80 pixels (50 + 30) between the two paragraphs, but you??™d
be wrong. The distance between them is actually 50 pixels. When
top and bottom margins meet, they overlap until one of the margins
touches the border of the other element. In this case, the larger top
margin of the lower paragraph touches ?¬? rst, so it determines how
far apart the elements are set??”50 pixels (Figure 4.
Pages:
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151