保证金倒塌规则

在CSS中，相邻边距有时会重叠。这就是所谓的“边际崩溃”，并且以相当卑鄙而闻名。

这个想法听起来很简单，但是如果您已经写了一段时间的CSS，几乎可以肯定的是，当边距不塌陷，或者它们以怪异且出乎意料的方式塌陷时，您会感到惊讶。在现实世界的项目中，各种情况都会使事情变得复杂。

好消息是，一旦我们了解了这个众所周知的混乱机制背后的规则，它将变得更加清晰，也就不那么令人惊讶了。

在本教程中，我们将深入研究细节并弄清楚。不再被迷惑了！

当margin-collapse被添加到CSS规范中时，语言设计者做出了一个奇怪的选择：水平边距不应该崩溃。

在早期，CSS并非旨在用于布局。编写规范的人想象的是标题和段落，而不是列和侧栏。

这是一个实时可编辑的示例。如果您使用的是桌面浏览器，请弹出打开开发者工具并亲自检查边距：

使用＆lt; br /＆gt;在某种程度上很常见。标签（换行符）以增加块元素之间的空间。

＆lt; br /＆gt;标签是不可见的且为空，但是其他两个元素之间的任何元素都将阻止边距折叠。元素需要在DOM中相邻，以使其边距折叠。

边距不对称怎么办？假设顶部元素在下方需要72px的空间，而底部元素仅需要24px？

如果您将裕度视为＆＃34;个人空间＆＃34 ;，则这一感觉会很直观。在历史的这一刻，保持6英尺的距离是社会责任。如果有人想要更多的空间（例如8英尺），我们将需要保持8英尺的距离，以满足两个人的空间要求。

我们将第一段放入包含＆lt; div＆gt;的行中，但页边距仍然会崩溃！

怎么会这样？好吧，事实证明，我们许多人对利润率的运作方式有误解。

保证金是为了增加兄弟姐妹之间的距离。这并不意味着增加孩子与其父母边界框之间的距离；这就是填充的用途。

边缘将始终在兄弟姐妹之间尝试和增加距离，即使它意味着将余量转移到父元素！在这种情况下，效果与我们已将余量施加到父级＆lt; div＆gt;而不是孩子＆lt; p＆gt;。

“但这可以＆＃39; t是！”，我可以听到你说的话。 “我之前使用过的余量以增加父母和第一个孩子之间的距离！”

有一些条件必须满足，以便将余额转移到父母（并折叠）：

最后一个条件真的很常见，所以让＆＃39;看看一个快速的例子。在这种情况下，我们嵌套的孩子可以＆＃39; t将边距与下一段结合在一起，因为父母有一些填充方式：

您可以将填充/边框视为一种墙壁;如果它坐在两个边距之间，他们可以＆＃39; t崩溃，因为那里的墙壁＆＃39。宽度并不重要;甚至1px的填充也会干扰边缘崩溃。

到目前为止，我们看到的所有例子都涉及相邻的边缘：一个元素的底部与下一个元素的顶部重叠。

您可以将其视为以前规则的扩展。儿童保证金将“吸收”进入父级保证金。这两个是结合的，并且受到与迄今为止看到的相同边缘崩溃规则（例如，最大的胜利）。

在这种情况下，您可能希望两个部分相互接触，并在每个容器内应用边距： 这似乎是一个合理的假设，因为＆lt; section＆gt;根本没有空白！ 目的似乎是要增加每个框顶部的空间，以便为段落提供一些喘息的空间。 问题在于0px的边距仍然是可折叠的边距。 每个部分的顶边距为0px，并且与段落上的32px顶边距组合在一起。 由于32px是两者中的较大者，因此获胜。 保证金崩溃不仅限于两个保证金！ 在此示例中，四个单独的边距占据相同的空间： 很难知道发生了什么，但这实质上是先前规则的组合： 兄弟姐妹可以合并相邻的边距（如果第一个元素的边距底边，第二个元素的边距边顶） ＆lt; header＆gt;之间的空格 和＆lt; section＆gt; 有4个独立的利润空间竞争占领该空间！

最终，该段落具有最大的累积边距，因此获胜，并且40px分隔页眉和节。

负边距使我们能够减小两个元素之间的间隔。它使我们可以将孩子拉到其父母边界框之外，或减小兄弟姐妹之间的间距，直到它们重叠。

负利润率如何崩溃？好吧，它实际上与正面评价非常相似！负边距将共享一个空间，该空间的大小由最高有效负边距确定。在此示例中，元素重叠了75像素，因为负负值（-75像素）比其他边缘（-25像素）更显着。

负边距和正边距混合在一起怎么办？在这种情况下，将数字加在一起。在此示例中，由于-50px + 50px为0，因此-50px负边距和50px正边距相互抵消并且没有效果。

为什么我们要应用无效的边距？好吧，有时您无法控制两个边距之一。也许它来自传统风格，或者紧紧围绕在一个组件中。通过向父级应用负的负边距，您可以＆＃34;取消＆＃34;保证金。

当然，这不是理想的。最好删除多余的边距，而不是添加更多的边距！但是在某些情况下，此漏洞修复程序可能会挽救生命。

我们已经深入了这里的杂草，还有一件事要看。这是最后的老板到目前为止，我们看到的所有规则都达到了顶峰。

如果我们有多个利润争夺同一空间，而有些利润为负，该怎么办？

这是代码示例。在devtools中四处查看，看看如何实现：

在此示例中，我们最重要的正余量为30px。我们最重要的负边距是-20px。因此，由于我们将正值和负值相加，所以最终以10px的实现余量结束。

（此图没有3D插图-老实说，它太忙了而且看上去很混乱，无法提供足够的清晰度😅）

到目前为止，我们所看到的所有示例都假设我们“不断发展”；我们不会使用Grid或Flexbox重新放置东西。

当项目与Grid或Flexbox对齐或流出时（例如，浮动，绝对定位），边距将永远不会崩溃。当与某些技术（例如我的全出血版式）结合使用时，这可能会令人惊讶。在这些情况下，最好使用缺口而不是保证金。

实际上，越来越多的开发人员选择布局组件而不是利润。我认为布局组件很棒，但是我也认识到余量是通用的。即使您决定放弃它，您仍然有必要在使用它的产品上或与使用它的开发人员一起工作。

但是，通过一些实践，这些东西就变成了第二天性。 很快，您就知道这些东西是如何工作的，您甚至不必考虑它。 这篇交互式文章摘自我即将开设的CSS课程，即JavaScript开发人员的CSS。 在课程中，您可以通过玩类似拼图的迷你游戏来建立直觉，并通过在视频引导的挑战中建立布局来进行练习。 它也远远超出了保证金崩溃的范围，我们涵盖了您成为一个令人眼花wh乱的CSS天才的所有必要知识。 如果您有兴趣，请检查一下！ 这是一个快速的Twitter式民意测验，它将使我知道本教程是否有效： 如果您回答“否”，您是否会介意在Twitter上让我知道哪些部分令人困惑？ 该材料将成为我的付费课程的一部分，所以我渴望使其尽可能好🙏