Question

假设您有两个元素，一个堆叠在另一个元素的顶部，每个元素都有3个顶部和底部边距。

通过这个设置，我预计两个元素之间总共有6个空白区域（距离顶部的底部边缘3rem，加上3rem来自最低的上边距）。但是，元素之间只有3个空白区域。

为什么边距元素之间的边距空间会崩溃，而不是每个块元素都保留在自己的边距空间中？

这是a codepen that illustrates the problem of collapsed margin space between two paragraphs。

上面的codepen示例的html是：

<p class="outline-red">This is a paragraph with top &amp; bottom margin and padding set at 3rem.</p>
<p class="outline-yellow">This is a paragraph with top &amp; bottom margin and padding set at 3rem.</p>

上面的codepen示例的CSS是：

body { 
  margin: 0;
  padding: 0 3rem;
  background-color: #34495e;
  font-family: "Helvetica", sans-serif;
  text-align: center;
  color: white;
}

.outline-red,
.outline-yellow {
  display: block;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.outline-red { border: 1px solid red; }

.outline-yellow {border: 1px solid yellow; }

Answer 1

简短的回答是，＆＃34;因为那是the spec所说的＆＃34;。

但我猜你真正问的是为什么规范会这样运作。我认为它与边距和填充之间的语义差异有关：

•填充是元素的一部分，不与其他元素共享。

•保证金不是元素的一部分，但与其他元素共享空间。

例如，元素背景覆盖填充，但不会延伸到边距。填充上的鼠标事件将传递给元素，但边距上的事件不会传递给元素。等

Answer 2

MDN：这就是它的方式

padding属性不崩溃。
margin属性垂直（顶部和底部）折叠。

CSS 2.1 - 8.3.1折叠边距： 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。


<强> Exceptions: float, inline-block, etc.


浮动框和任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

建立新的块格式化上下文的元素的边距（例如浮点数和带溢出的元素＆＃39;除了＆＃39;可见＆＃39;） 与流动的孩子不会崩溃。

绝对定位的盒子的边距不会崩溃（甚至没有流入的孩子）。

内嵌块框的边距不会崩溃（即使是流入的子项也不会崩溃）。

的 ...

Answer 3

第二个margin-top并不关心第一个margin-bottom空格，它只关心第一个元素。因此，计数从第一个元素的位置开始（没有边距）。

为什么堆叠的HTML块元素之间的边距空间会崩溃而不是每个元素断言自己的边距空间？

3 个答案: