元素是网页的基础，而在构建网站时，实际上是在“砌砖”元素。 放置这些元素后，可以使用CSS调整它们的外观和位置。
为了将元素相对于其他元素正确地放置在网页上，我们使用诸如填充和边距之类的东西。 这些是：
- 填充 ：元素边框和内容区域之间的空间。
- 边距 ：元素边界与其相邻元素边界之间的空间
以下是使用Google Chrome浏览器的Web检查器可视化元素的填充和边距的方法：
这应该是足够清晰，但有一种情况，其中一个元素的邻居之间以及利润率将合并（或折叠 ） 进入一个统一的空间； 这样就无法正确判断它是谁的空间：
如果您已经编写HTML和CSS已有一段时间，那么这可能是在您自己的代码中发生的。 如果您不知道幕后发生的事情，那可能会刺痛您！
为了正确理解它，我们需要从边际崩溃的意义开始。
什么是可折叠保证金？
好问题，很高兴你问。 根据W3C ：
“在CSS中，两个或多个框（可能是也可能不是同级）的相邻边距可以合并为一个边距。 以此方式合并的边距被称为崩溃，而合并的边距称为崩溃边距。” – W3C
让我们将这些单词一点一点地分开。
因此，“边际利润” 是彼此相邻的边距，它们可以合并形成一个边距。 但这是否意味着所有相邻的边距都可折叠？ 答案是不！
在CSS中，相邻边距是满足某些规则的垂直边距。 是的，你没看错！ 这意味着水平边距（ margin-left和margin-right ）不被视为相邻边距。 此外，在某些情况下，垂直边距不被认为是相邻的。
让我们的一些情形可折叠的利润率确实发生了开始。
1.父元素和第一个孩子
在下面的代码示例中：
Outside the parent
Here is a paragraph housed in the parent element
第二个div是父级，它包含一个子级p 。 如果我们对父级和第一个孩子应用margin-top属性，导致两个页边距都接触，则页边距将被折叠。
div {
background: #3d8bb1 /* blue */;
}
.parent {
margin-top: 30px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: 10px;
background: #b03532 /* red */;
} 您可能希望在红色p元素正上方显示边距，从而在其上方给我们一片绿色。
但是，父级及其子级在其顶部边缘对齐，然后选择值较大的边距（ 30px ）来同时显示它们，较小的边距会折叠为0 。 如果孩子有较大的值（例如50px ），则将其选择为它们上方的边距。
如果进行测量，您将看到孩子的边框和外部div之间的空间为30px 。
负保证金值
如果两个边距都为负值，则如下所示：
.parent {
margin-top: -30px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: -10px;
background: #b03532 /* red */;
} 所选边距再次是最大的，在这种情况下为-10px 。
但是，如果一个边距是负值，而另一个边距，则我们将两个值合并：
.parent {
margin-top: 10px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: -30px;
background: #b03532 /* red */;
} 在这种情况下，将添加边距，这将使我们得到-20px的结果。
重要说明 ：在所有边距崩溃的情况下，都以完全相同的方式确定值。
2.父元素和最后一个孩子
正如你可能想象的，可折叠的利润还可以在发生之间的margin-bottom父元素和margin-bottom子元素。 假设我们有如下所示HTML：
Here is a paragraph housed in the parent element
Outside the parent样式如下所示：
.parent {
margin-bottom: 30px;
background: #49b293 /* green */;
height: auto;
}
.child {
margin-bottom: 10px;
background: #b03532 /* red */;
height: 100px;
} 将使用具有较大值的margin-bottom ，而另一个将被折叠为0 。 此处的区别是必须将父级的高度设置为auto 。
3.相邻元素
在父元素内，当第一个子元素被应用margin-bottom到下一个元素并被应用margin-top时，将发生可折叠边距：
Here is a paragraph housed in the parent element
This is the second child
如果我们像这样应用margin-top和margin-bottom ：
.first-child {
margin-bottom: 30px;
background: #b03532 /* red */;
height: 150px;
}
.second-child {
margin-top: 20px;
background: #da6f2b /* orange */;
height: 100px;
} 以我们之前计算的相同方式，子元素边框之间的间隔将为30px ，而不是20px 。
切记边际崩溃要记住的3点
这使我们到了CSS边距崩溃的介绍的结尾！ 除了上面已经看到的内容外，我还需要重申一些关于保证金贬值的重要事项。
1.块级元素
仅当使用块级元素时才可以使用可折叠边距。
2.边距仅在垂直方向折叠
只有垂直相邻的页边空白会崩溃，即使这样也不会总是崩溃。
2.填充，边框和间隙
如果在以上示例中为元素添加了填充，边框或间隙，则不会应用折叠。 换句话说，消除可折叠边距行为的一种方法是在边距之间添加某种分隔（边界，填充或间隙）。
结论
尽管边缘收缩有时会很痛苦，但了解它们的作用方式和作用非常有帮助，特别是如果您偶然遇到它们时！
翻译自: https://webdesign.tutsplus.com/tutorials/css-basics-understanding-collapsing-margins--cms-34272