详解css外边距折叠（margin collapsing）

前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： &lt;style&gt; .slide1 div { margin:10px 0; } &lt;/style&gt; <div class=slide1> <h3>第1种外边距折叠：兄弟元素</h3> <p>文本上下间距10px</p> <p>文本上下间距10px</p> </div> 看这个例子中的两个p标签，根据样式定义：第一个p的margin-bottom和第二个p的margin-top 都是10px，那实际距离应该等于20p