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

时间:2015-03-13 22:21:32

标签: html css

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

通过这个设置,我预计两个<p>元素之间总共有6个空白区域(距离顶部<p>的底部边缘3rem,加上3rem来自最低<p>的上边距)。但是,元素之间只有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; }

3 个答案:

答案 0 :(得分:4)

简短的回答是,&#34;因为那是the spec所说的&#34;。

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

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

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

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

答案 1 :(得分:1)

MDN:这就是它的方式

  • padding属性崩溃。
  • margin属性垂直(顶部和底部)折叠。
  

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

     
     

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

     
      
  • 浮动框和任何其他框之间的边距不会崩溃(甚至在浮动及其流入子项之间也不会崩溃)。
  •   
  • 建立新的块格式化上下文的元素的边距(例如浮点数和带溢出的元素&#39;除了&#39;可见&#39;)   与流动的孩子不会崩溃。
  •   
  • 绝对定位的盒子的边距不会崩溃(甚至没有流入的孩子)。
  •   
  • 内嵌块框的边距不会崩溃(即使是流入的子项也不会崩溃)。
  •   
  • ...
  •   

答案 2 :(得分:1)

第二个margin-top并不关心第一个margin-bottom空格,它只关心第一个<p>元素。因此,计数从第一个<p>元素的位置开始(没有边距)。