假设您有两个<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 & bottom margin and padding set at 3rem.</p>
<p class="outline-yellow">This is a paragraph with top & 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; }
答案 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>
元素的位置开始(没有边距)。