关于折叠边距你需要了解的

好的，所以一些间距走进酒吧，绊倒并跌倒在地板上。 酒保问他是否应该被切断，间距回答说，“不，我只是一个折叠的边距。”

对不起，愚蠢的笑话。

更严肃地说，折叠边距是真实存在的，如果您不知道它们是什么以及它们的行为方式，它们会让您非常头疼。 以下是一些我们看到这些小家伙发挥作用的场景。

当垂直世界发生碰撞时

当两个垂直边距彼此接触时，就会发生折叠边距。 如果一个边距大于另一个，则该边距将覆盖另一个，只留下一个边距。

假设我们在彼此之上堆叠元素，一个带有底部边距，一个带有顶部边距

.module {
  display: block;
  width: 100%;
  height: 150px;
}

.module__top {
  margin-bottom: 25px;
  background-color: #f38a6d;
}

.module__bottom {
  margin-top: 50px;
  background-color: #3bbfef;
}

如果上面的模块在 HTML 标记中彼此相邻放置，那么我们可能会期望它们之间垂直有 75px (25px 来自顶部模块加上 50px 来自底部模块)，对吧？

好吧，在本期《CSS 生存法则》中，我们只获得了其中的 50 个像素。 这就像较大的边距直接吃掉了另一个边距，没有留下任何东西。

查看 Pen 折叠边距：垂直 来自 CSS-Tricks (@css-tricks) on CodePen.

继续测量。 这两个模块之间的空间总计 module__bottom 的 50px，并将 module__top 的边距踢到路边。

自然反应可能是不断增加较小的边距，直到它产生效果。 但是，当两个边距都是正数时

较大的边距 = 总垂直边距

你们中比我更善于数学的人可能会巧妙地问：负边距怎么样？ 答案是它确实有重大影响，并减少了两个元素之间的边距。

50px + (-25px) = 25px

用英语来说，如果一个边距为负数，则负边距将从正边距中减去，从而减少总垂直边距。 以下是它的样子

查看 Pen 折叠边距：垂直和负数 来自 CSS-Tricks (@css-tricks) on CodePen.

如果两个边距都是负数呢？ 与两个边距都是正数的情况相同。 但是，折叠的边距是两个中较大的负数，而不是最接近正数的边距。 例如，如果一个边距是 -25px，另一个是 -50px，则 -50px 将是边距。

您可能会遇到的另一种情况是，当一个垂直边距遇到一个相等的垂直边距时。 如果这确实是“适者生存”，那么两个相互冲突的相等边距应该要么共同生存，要么共同死亡，对吧？ 这是一个很好的想法，但最终发生的是，一个继续使用，另一个被折叠。 它有点像一个吞掉了另一个，虽然我们不确定哪个被吞掉了。

当父母管教孩子时

当子元素的边距跨过其父元素的边距时，也会发生折叠边距。 让我们考虑以下情况

/* Parent */
div {
  margin: 15px;
}

/* Here come the children */
.red {
  background-color: #ff6b6b;
}

.orange {
  background-color: #ff9e2c;
}

.yellow {
  background-color: #eeee78;
}

.green {
  background-color: #4ecd9d;
}

.blue {
  background-color: #4e97cd;
}

.purple {
  background-color: #6c4ecd;
}

在这个例子中，div 是父元素，每个后面的类都是嵌套的子元素。 这就建立了父子关系。

同样，我们的自然倾向可能是期望总边距是父边距和子边距的总和。 但是，情况并非如此，子边距将被父边距覆盖——至少只要子元素生活在父元素的屋檐下。 父母可以是如此霸道。

但是就像任何父母的惩罚一样，有一种方法可以绕过它，即在父元素中添加一些实心内容。 在这种情况下，添加 1px 的填充可以让两个边距都被使用。

查看 Pen 折叠边距：父母和孩子比较 来自 CSS-Tricks (@css-tricks) on CodePen.

如果我们在父元素中添加 border-top，情况也是如此。 只要父元素和子元素之间存在一些实心内容，两个边距都会被使用。

最后

您是否看到了折叠边距如何使事情变得棘手？ 我个人在处理排版时经常遇到这种情况。 我很想为 <h1> 和 <h2> 等内容添加边距，但这通常会导致以后出现许多麻烦，因为垂直边距会彼此碰撞。

我很想知道你们对折叠边距的看法。 特别是，您如何在基于模式的系统中管理它们？ Harry Roberts 提供了一些很好的技巧。 请分享！