Question

我已经读过，如果一个元素嵌套在另一个元素中并且它们都有边距，那么它们可能会崩溃（假设它们的垂直边距正在接触）。

a）在什么条件下他们的垂直边距会触及？也许只有当父元素具有固定高度时，内部元素占用的空间比父元素所拥有的更多垂直空间（我做了一些实验，但我认为我没有设法导致相邻内部的垂直边缘和外部元素崩溃）？

b）无论如何，我不太明白为什么（从设计师的角度来看）使内部和外部元素的边缘崩溃是一个好主意？

c）假设内部元素的边距为100px，外部元素的边距为20px，当两个边距折叠时，两个元素的边距均为100px？

无论如何，我仍然很难想象这一点。也就是说，通常触及的边距是下边距和上边距，但这里的边距都是下边距或上边距

感谢名单

编辑：

1）由于在以下示例中（取自您提供的链接） div 和 h1 的边距崩溃，我希望最高的部分 h1 元素中的字母将触及 div 元素的顶部边缘（即橙色矩形的顶部），但是之间存在一些空间（几毫米）字母和矩形的顶边。这是为什么？

#masthead {background: #F80; margin: 10px;}
#masthead h1 {margin: 20px 10px;}
#masthead p {margin: 5px 10px; font-style: italic;}


<div id="masthead">
<h1>ConHugeCo</h1>
<p>Making the world safe for super sizes</p>
</div>

2）为什么应用填充会导致（父 div 和子 h1 ）的边距不崩溃？因为现在 h1 的边距不是从同一个地方开始（那个地方是橙色矩形的顶边）作为父 div 的边缘？

感谢名单

Answer 1

Eric Meyer知道关于CSS的垃圾负载。

查看this article他撰写的关于利润率下降，发生原因以及如何在需要时停止利润的文章。

编辑：更新后更新。

1）我猜测h1的字母由于行高而未触及div。一行文本在其上方有一些空间，基于行高，与边距或填充无关。如果你想让它们完全冲洗，请尝试调整它。

2）我不知道在涉及填充时为什么边距不会崩溃的确切原因。我将假设它与箱型号规格有关......

当相邻内部和外部元素的边缘崩溃时

1 个答案: