一个著名的例子:外边距折叠(margin collapsing)
HTML:
<p>The bottom margin of this paragraph is collapsed …</p>
<p>… with the top margin of this paragraph, yielding a margin of <code>20px</code> in between.</p>
<div>This parent element contains two paragraphs!
<p>This paragraph has a <code>20px</code> margin between it and the text above.</p>
<p>My bottom margin collapses with my parent, yielding a bottom margin of <code>20px</code>.</p>
</div>
<p>I am <code>20px</code> below the element above.</p>CSS:
div {
margin: 10px 0;
background: lavender;
}