深圳市蚂蚁网络

　　我们大多数人在学习CSS时学到的第一件事就是CSS中框的各个部分的细节，描述为CSSBox模型。Box模型中的一个元素是边距，一个盒子周围的透明区域，它将推动其他元素远离盒子内容。的margin-top，margin-right，margin-bottom和margin-left属性右后卫CSS1进行了说明，随着速记margin可以一次将所有四个属性。

CSS Box模型

　　与所有关于CSSBox模型部分的文章一样，我们应该定义我们的意思，以及如何通过CSS版本澄清模型。该盒模型是指盒的各个部分是如何-的内容，填充，边框和边距-铺设并相互交流。在CSS1中，Box模型详细说明了如下图所示的ASCII艺术图。

CSS1中CSS Box模型的描述

　　盒子每一侧的四个边距属性和margin速记都在CSS1中定义。

　　CSS2.1规范有一个例子来演示Box模型，并定义了我们仍然用来描述各种框的术语。说明书描述了contentbox，paddingbox，borderbox，和marginbox，每个由所述内容，填充，边框和余量的边缘分别限定。

CSS2中CSS Box模型的考察

　　现在有一个Level3BoxModel规范作为工作草案。本规范引用了CSS2来定义Box模型和边距，因此我们将在本文的大部分内容中使用CSS2定义。

保证金崩溃

　　CSS1规范，因为它定义了边距，也定义了垂直边距崩溃。从那以后，这种崩溃行为一直是与保证金相关的挫败感的根源。如果您考虑在早期使用CSS作为文档格式化语言，则边距折叠是有意义的。边距折叠意味着当具有底部边距的标题后面跟着具有上边距的段落时，您不会在这些项目之间产生巨大差距。

　　当边距崩溃时，它们将组合在一起，使得两个元素之间的空间成为两个边距中较大的一个。较小的边际基本上在较大的边缘内。

　　在以下情况下，边距会崩溃：

• 相邻的兄弟姐妹

• 完全空盒子

• 父级和第一个或最后一个子元素

　　在查看阻止边缘在这些场景中崩溃的事情之前，让我们依次看一下这些场景中的每一个。

相邻的兄弟姐妹

　　我对边缘坍塌的初步描述证明了相邻兄弟之间的边缘如何崩溃。除了在下面提到的情况下，如果在正常流程中有两个元素一个接一个地显示，则第一个元素的下边距将与下一个元素的上边距一起折叠。

　　在下面的CodePen示例中，有三个div元素。第一个的顶部和底部边距为50像素。第二个的上下边距为20px。第三个是3em的上下边距。前两个元素之间的边距为50像素，因为较小的上边距与较大的下边距组合。3em中第二个两个元素之间的边距，因为3em大于第二个元素底部的20个像素。

完全空盒子

　　如果一个盒子是空的，那么它的顶部和底部边缘可能会相互折叠。在下面的CodePen示例中，类为空的元素的顶部和底部边距为50像素，但是，第一个和第三个项目之间的空间不是100像素，而是50.这是由于两个边距折叠。向该框添加任何内容（甚至填充）将导致使用顶部和底部边距而不会折叠。

父母和第一个或最后一个孩子元素

　　这是边际崩溃的情况，最常吸引人们，因为它似乎不是特别直观。在下面的CodePen中，我有一个div包装类，我给它div一个outline红色，这样你就可以看到它的位置。三个子元素都有50像素的边距。但是，第一个和最后一个项目与包装纸的边缘齐平;元素和包装器之间没有50像素的边距。

　　这是因为孩子的边距与父母的任何边缘一起崩溃，从而最终在父母的外面。如果您使用DevTools检查第一个孩子，您可以看到这一点。突出显示的黄色区域是边距。

只有块边缘崩溃

　　最后一个例子还突出了有关边距折叠的一些信息。在CSS2中，只指定垂直边距折叠-如果处于水平书写模式，则为元素的上边距和下边距。因此上面的左右边距不会折叠并最终在包装器外面。

　　注意：值得记住的是，边距只会在块方向上崩溃，例如段落之间。

防止边缘崩溃的事情

　　如果项目具有绝对定位或浮动，则边距永远不会崩溃。但是，假设您遇到上述边缘崩溃的地方之一，您如何阻止这些边缘崩溃？

　　停止折叠的第一件事是在有问题的元素之间存在某些东西的情况。

　　例如，如果内容完全没有内容，则如果它具有边框或应用了填充，则不会折叠其顶部和底部边距。在下面的示例中，我在框中添加了1px的填充。盒子上方和下方现在有50像素的边距。

　　这背后有逻辑，如果盒子是完全空的，没有边框或填充，它基本上是不可见的。它可能是CMS中标记为空的段落元素。如果您的CMS添加了多余的段落元素，您可能不希望它们在其他段落之间造成较大的差距，因为它们的边距得到尊重。在框中添加任何内容，您将获得这些差距。

　　对于通过父级崩溃的第一个或最后一个孩子的边距，可以看到类似的行为。如果我们向父级添加边框，则子级上的边距会保留在内部。

　　再一次，这种行为有一些逻辑。如果您有用于语义目的的包装元素无法直观显示，您可能不希望它们在显示中引入大的间隙。当网络主要是文本时，这很有意义。当我们使用元素来布局设计时，它作为行为不太有用。

创建块格式上下文

　　新的块格式化上下文（BFC）还将阻止边距通过包含元素折叠。如果我们再看一下第一个和最后一个孩子的例子，最后用它们在包装器之外的边距，并给出包装器display:flow-root，从而创建一个新的BFC，边距保持在里面。

　　要了解更多信息display:flow-root，请阅读我的文章“了解CSS布局和块格式上下文”。更改overflow属性的值auto将具有相同的效果，因为这也会创建一个新的BFC，尽管它也可能创建在某些情况下您不想要的滚动条。

FLEX和网格容器

　　Flex和Grid容器为其子项建立Flex和Grid格式化上下文，因此它们具有阻止布局的不同行为。其中一个差异是利润不会崩溃：

“Flex容器为其内容建立新的flex格式化上下文。这与建立块格式化上下文相同，除了使用flex布局而不是块布局。例如，浮动不会侵入弹性容器，并且弹性容器的边距不会随其内容的边缘而崩溃。“ 

- Flexbox Level 1

　　如果我们采用上面的例子并将包装器放入一个flex容器中，显示带有的项目flex-direction:column，你可以看到包装器现在包含了边距。此外，相邻弹性项目之间的边距不会相互折叠，因此我们最终在弹性项目之间有100个像素，这是项目顶部和底部的50个像素的总和。

您网站的保证金策略

　　由于保证金崩溃，最好能够采用一致的方式处理您网站的保证金。最简单的方法是仅在元素的顶部或底部定义边距。通过这种方式，您不应经常遇到保证金折叠问题，因为有保证金的一方总是与没有保证金的一方相邻。

　　注意：HarryRoberts有一篇很好的文章，详细说明了为什么只设置一个方向的利润是一个好主意，而不仅仅是因为解决了崩溃边际问题。

　　此解决方案无法解决您通过其父级折叠的子级边距可能遇到的问题。这个特定的问题往往不那么常见，知道它为什么会发生，可以帮助你找到解决方案。一个理想的解决方案是提供需要它的组件display:flow-root，作为旧版浏览器的后备，您可以使用它overflow来创建BFC，将父项转换为flex容器，甚至引入单个填充像素。不要忘记您可以使用功能查询来检测支持，display:flow-root因此只有旧浏览器才能获得不太理想的修复。

　　大多数时候，我发现知道边际崩溃（或没有）的关键是关键。然后，您可以根据具体情况了解如何处理它。无论您选择什么，请务必与您的团队分享这些信息。边缘崩溃往往有点神秘，所以做反对的事情的原因可能是不明显的！您的代码中的注释很有帮助-您甚至可以链接到本文并帮助共享边缘折叠知识。

　　我以为我会用一些其他与保证金相关的信息来整理这篇文章。

百分比

　　当您在CSS中使用百分比时，它必须是某个百分比。使用百分比设置的边距（和填充）将始终是父级的内联大小（水平书写模式下的宽度）的百分比。这意味着在使用百分比时，您将在元素周围具有相同大小的填充。

　　在下面的CodePen示例中，我有一个200像素宽的包装器，里面是一个10％边距的盒子，边缘是所有边的20像素，即200的10％。

流动相对世界的边缘

　　我们在本文中一直在讨论垂直边距，但是，现代CSS倾向于以流相对而非物理方式来思考事物。因此，当我们谈论垂直边距时，我们真的在讨论块尺寸中的边距。如果我们处于水平书写模式，那些边距将是顶部和底部，但是在从左到右书写的垂直书写模式中左右边缘。

　　一旦使用逻辑，流程相对方向，就可以更容易地讨论块开始和块结束，而不是顶部和底部。为了简化这一过程，CSS引入了逻辑属性和值规范。这会将流相对属性映射到物理属性上。

　　对于边距，这为我们提供了以下映射（如果我们使用英语或任何其他具有从左到右文本方向的水平书写模式）。

• margin-top = margin-block-start

• margin-right = margin-inline-end

• margin-bottom = margin-block-end

• margin-left = margin-inline-start

　　我们还有两个新的shorthands，允许同时设置两个块或内联。

• margin-block

• margin-inline

　　在下一个CodePen示例中，我使用了这些流相对关键字，然后更改了框的书写模式，您可以看到边距如何遵循文本方向，而不是绑定到物理顶部，右侧，底部和左侧。

　　您可以在SmashingMagazine上阅读有关MDN上的逻辑属性和值的更多信息，或者阅读我的文章“了解逻辑属性和值”。

总结

　　您现在知道关于边距的大部分内容！简而言之：

• 保证金崩溃是一件事。了解它发生的原因以及它何时不会帮助您解决可能导致的任何问题。

• 在一个方向上设置边距只能解决许多与边缘相关的问题。

• 与CSS中的任何内容一样，与您的团队分享您做出的决策，并对您的代码进行评论。

• 考虑到块和内联维度而不是物理顶部，右侧，底部和左侧将有助于您随着Web向写作模式不可知的方向发展。

　　肇庆网站制作