If a box has no
padding, the padding edge is equivalent to the content edge.
Refer to The CSS Box Model (p. 142) for a graphic illustration of these concepts.
Collapsing Margins
Let??™s explore exactly what the consequences of collapsing margins are, and how
they will affect elements on the page.
The W3C specification6 defines collapsing margins as follows:
???In this specification, the expression collapsing margins means that adjoining
margins (no non-empty content, padding, or border areas, or clearance separate
them) of two or more boxes (which may be next to one another or nested) combine
to form a single margin.???
6 http://www.w3.org/TR/CSS21/box.html#collapsing-margins
149 CSS Layout and Formatting
In simple terms, this definition indicates that when the vertical margins of two
elements are touching, only the margin of the element with the largest margin value
will be honored, while the margin of the element with the smaller margin value
will be collapsed to zero.7 In the case where one element has a negative margin, the
margin values are added together to determine the final value.
Pages:
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228