CSS 基础：了解折叠边距

元素是网页的构建块——在构建网站时，您实际上是在“铺设”元素。放置这些元素时，您可以使用 css 来调整它们的外观和位置。

为了在网页上正确放置一个元素与其他元素的关系，我们使用了诸如填充和边距之类的东西。这些是：

• Padding：元素边框和内容区域之间的空间。

• 边距：元素边界与其相邻元素边界之间的空间 

以下是使用 Google chrome 的 Web Inspector 可视化元素的填充和边距的方式：

这个应该已经够清楚了，但是有一种情况，一个元素和一个相邻元素的margin会合并（或者 collapse） 成一个统一的空间；这样就无法正确判断它是谁的空间：

如果您已经编写了一段时间的 html 和 CSS，这可能发生在您自己的代码中。如果您不知道幕后发生的事情，它可能会成为您的眼中钉！

为了正确理解它，我们需要从利润率崩溃的含义开始。

什么是可折叠保证金？

好问题，很高兴你问。根据W3C：

“在 CSS 中，两个或多个框（可能是或可能不是兄弟）的相邻边距可以组合成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。” –  W3C

让我们一点一点地拆开这些词。

因此，“相邻边距” 是彼此相邻的边距，它们可以组合形成一个边距。但这是否意味着所有相邻的边距都是可折叠的？答案是不！

在 CSS 中，相邻边距是符合某些规则的垂直边距。是的，你没看错！这意味着水平边距 (margin-left和margin-right) 不被视为相邻边距。此外，在某些情况下，垂直边距不被视为相邻。

让我们从一些确实发生可折叠边距的场景开始。

1.父元素和第一个子元素

在下面的代码示例中：

<div>Outside the parent</div>

<div class="parent">

  <p class="child">

    Here is a paragraph housed in the parent element

  </p>

</div>

第二个 div是 parent ，它包含一个 child 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），那么它将被选为它们上方的边距。

See the Pen  collapsible margin 1 by Envato Tuts+ (@tutsplus)  on CodePen.

如果你测量它，你会看到孩子的边框和外面之间的空间div是 30px.

负边距值

如果两个边距都为负值，如下所示：

.parent {

  margin-top: -30px;

  background: #49b293 /* green */;

  height: 150px;

}

.child {

  margin-top: -10px;

  background: #b03532 /* red */;

}

选择的边距又是最大的，在这种情况下是-10px。

See the Pen  collapsible margin 2 by Envato Tuts+ (@tutsplus)  on CodePen.

但是，如果一个边距是负值而另一个是负值，我们将两个值结合起来：

.parent {

  margin-top: 10px;

  background: #49b293 /* green */;

  height: 150px;

}

.child {

  margin-top: -30px;

  background: #b03532 /* red */;

}

在这种情况下，将添加边距，这将为我们提供-20px.

See the Pen  collapsible margin 3 by Envato Tuts+ (@tutsplus)  on CodePen.

重要提示：在所有边距崩溃的情况下，值都是以完全相同的方式确定的。

2.父元素和最后一个子元素

正如您可能想象的那样，可折叠边距也可能发生在margin-bottom父元素的 和margin-bottom子元素的 之间。假设我们的 HTML 看起来像这样：

<div class="parent">

  <p class="child">

    Here is a paragraph housed in the parent element

  </p>

</div>

<div>Outside the parent</div>

看起来像这样的样式：

.parent {

  margin-bottom: 30px;

  background: #49b293 /* green */;

  height: auto;

}

.child {

  margin-bottom: 10px;

  background: #b03532 /* red */;

  height: 100px;

}

将margin-bottom使用具有较大值的 ，而将另一个折叠为0。这里的区别是必须将父级的高度设置为auto.

See the Pen  collapsible margin 4 by Envato Tuts+ (@tutsplus)  on CodePen.

3.相邻元素

margin-bottom在父元素中，当第一个子元素应用于它并且下一个元素应用于它时，将发生可折叠边距margin-top ：

<div class="parent">

  <p class="first-child">

    Here is a paragraph housed in the parent element

  </p>

  <p class="second-child">

    This is the second child

  </p>

</div>

如果我们申请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。

See the Pen  collapsible margin 5 by Envato Tuts+ (@tutsplus)  on CodePen.

关于崩溃边距要记住的 3 点

这使我们结束了对 CSS 中折叠边距的介绍！除了我们在上面看到的内容之外，关于折叠保证金的价值，我应该重申一些重要的事情。

1. 块级元素

只有在使用块级 元素时，才可以使用可折叠边距 。

2. 边距仅垂直折叠

只有垂直相邻的边距会折叠，即使这样也并非总是如此。

2. 填充、边框和间隙

如果我们在上面的示例中为元素添加了填充、边框或间隙，则不会应用折叠。换句话说，摆脱可折叠边距行为的一种方法是在边距之间添加某种分隔（边框、填充或间隙）。 

结论

虽然折叠边距有时可能会很痛苦，但了解它们的作用方式和位置非常有帮助，尤其是在您不小心遇到它们的情况下！