If both are negative,
the greater negative value is used. This definition applies to adjacent elements and
nested elements.
There are other situations where elements do not have their margins collapsed:
?– floated elements
?– absolutely positioned elements
?– inline-block elements
?– elements with overflow set to anything other than visible (They do not collapse
margins with their children.)
?– cleared elements (They do not collapse their top margins with their parent block??™s
bottom margin.)
?– the root element
This is a difficult concept to grasp, so let??™s dive into some examples.
Collapsing Margins Between Adjacent Elements
Margins collapse between adjacent elements. In simple terms, this means that for
adjacent vertical block-level elements in the normal document flow, 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. If, for example,
one element has a 25px bottom margin and the element immediately underneath it
has a 20px top margin, only the 25px bottom margin will be enforced, and the
elements will remain at a distance of 25px from each other.
Pages:
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229