CSS边距如何工作？答案

【问题标题】：How does CSS margin work?CSS边距如何工作？
【发布时间】：2013-12-12 22:49:21
【问题描述】：

在下面的代码中，.box1 和 .box2 之间的边距不应该是 20px，因为 .box1 的底部边距为 10px，.box2 的顶部边距为 10px。

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS：

.box1{
    margin-bottom: 10px;
}

.box2{
    margin-top: 10px;
}

【问题讨论】：

标签： html css

【解决方案1】：

不，两个框之间的边距只有 10px。

你说同样的事情两次，“框 1 下方必须有 10px 的边距” 和“box2上方必须有10px的边距”

这样想：

有 2 个人，Harry 和 Sally。哈利站在离莎莉 10 英尺的地方。莎莉离哈利有多远？是的，你明白了，10 英尺！

【讨论】：

当您尝试将两个框水平对齐并说“box1 右侧必须有 10px 的边距”和“左侧必须有 10px 的边距”时，此示例会失败框 2"。你可以说哈利站在莎莉上方 10 英尺处……但这听起来就像一道小学数学题。
喜欢这些例子，这是解释这一点的好方法。
也就是说，折叠边距的想法是主要基于您刚刚解释的内容，除了它基于段落之间的前导，这就是为什么它只适用于垂直边距而不是水平边距。
“我要她的东西！” ...因为它们共享相同的边距。
很好的类比，+1

【解决方案2】：

第一个框的下边距和第二个框的上边距被认为是相邻的；因此，他们将collapse 合二为一。

请注意，这只适用于垂直边距；无论在什么情况下，水平边距都不会塌陷。如果您让两个框浮动，使它们水平排列，并给.box1 一个右边距，给.box2 一个左边距，the total space between them would indeed be 20px。

事实上，即使您没有将它们水平排列，而是将它们浮动并给予它们间隙，以便.box2 清除.box1、the bottom and top margins would no longer collapse。规范中也提到了这两种情况。

【讨论】：

【解决方案3】：

您需要了解边距折叠。下图描述了边距折叠。

【讨论】：

【解决方案4】：

边距在您的 DOM 元素之外，用于其他边距，例如透明，因此它们会相互重叠。

如果你用填充来做，它会很好用，因为填充在 div 内。

【讨论】：

【解决方案5】：

了解边距折叠

【讨论】：