我一直在运行一些测试来找出为什么有些 CSS 边距会崩溃,为什么有些不会。我有以下测试代码:

<div id="seconddiv" style="margin-top:10px; margin-bottom:10px;">
    <p style="height:200px; margin-top:5px; margin-bottom:5px;">This is the first paragraph in  the second div!This paragraph is 200px tall.</p>
    <p style="height:300px; margin-top:5px; margin-bottom:5px;">This is the second paragraph in the second div!This paragraph is 300 px tall.</p>
    <p style="height:400px; margin-top:5px; margin-bottom:5px;">This is the third paragraph in the second div!This paragraph is 400px tall.</p>
</div>

我试图准确地获取 div 的高度,但 scrollHeight 返回“910px”。这是为什么?我期望“900px”作为滚动高度,因为它不包括边距。

一些 <p> 边距是否折叠并计入高度?为什么有些而不是其他。我尝试了许多不同的边距高度组合,但没有任何值显示发生了什么。

最佳答案

我认为您没有理解“ margin 崩溃”的含义。

我将在以下示例中使用 this simplified markup:

HTML:

<div>
   <span>A</span>
   <span>B</span>
   <span>C</span>
</div>

CSS:
span {
    display: block;
    height: 100px;
    margin: 5px 0;
}

不是将每个边距显示为单独的间距,元素上的顶部和底部边距将与其兄弟元素(或者如果不存在上一个/下一个兄弟元素,则它们的父元素*)合并,以便它们之间的间距是最大的边距。

如果没有边距崩溃,上述标记将显示为:
+div-----+
| margin |
|+span--+|
||A     ||
|+------+|
| margin |
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
| margin |
|+span--+|
||C     ||
|+------+|
| margin |
+--------+

使用边距折叠,标记显示为:
  margin
+div-----+
|+span--+|
||A     ||
|+------+|
| margin |
|+span--+|
||B     ||
|+------+|
| margin |
|+span--+|
||C     ||
|+------+|
+--------+
  margin

这对于 div 的高度意味着它包括每个元素的高度和它们之间的边距。

在我的示例中,高度是 100 + 5 + 100 + 5 + 100 = 310

在您的示例中,高度为 200 + 5 + 300 + 5 + 400 = 910

* 有一些额外的复杂性涉及填充、定位和 float ,即 described by the specification

关于html - 为什么只有一些 CSS 边距会折叠?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12481516/

10-11 12:53
查看更多