为什么元素的负底部边距会降低该元素的父级高度？

Question

这可能是由于边缘折叠，我知道边缘折叠，至少它如何影响相邻元素，但我不明白当涉及负边距时它如何在嵌套元素上起作用。

例如，在此标记和随附的CSS中：

标记

<div class="parent">
  <div class="child">
    Child 1
  </div>
</div>

<div class="parent">
  <div class="child negative">
    Child 1
  </div>
</div>

CSS

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
}

.negative {
  margin-bottom: -1px;
}

这里有实例。

当我检查第二个.parent div的高度时，我注意到它比第一.parent 1个像素。 之所以发生这种情况，是因为其内部的.negative元素的负边距。 我快速浏览了W3C，找不到这种行为的解释。

有人可以解释一下这里发生了什么，并为我提供了W3C规范部分的链接吗？

Answer 1

这可能是由于边缘折叠，我知道边缘折叠，至少它如何影响相邻元素，但我不明白当涉及负边距时它如何在嵌套元素上起作用。

第8.3.1节包含所有细节。 它还介绍了嵌套框之间相邻边距的行为以及负边距。

但是，你在这里看到的并不是保证金崩溃的结果，因为你用.parent规则中的border: 1px solid black声明否定了它。 这意味着有一个边框可以防止你的.parent边距与你的.child.negative边缘完全崩溃。

相反，这只是负边际效应的方式。 这在视觉格式化模型的各个部分中都有涉及，但它在第11节的开头最简洁直接地解决，因此总结了它：

通常，块框的内容被限制在框的内容边缘。 在某些情况下，盒子可能会溢出，这意味着它的内容部分或完全位于盒子之外，例如：

• ...
• 后代框具有负边距 ，使其部分位于框外。

所以这里发生的事情是：

1. 从.parent元素的实际高度（ 1px ）中减去.child.negative元素的负边距的.parent 。

2. 结果， .child.negative元素本身溢出.parent （因为它自己的高度没有改变，任何div的默认overflow都是visible ）。

3. 由于保证金崩溃在此处不起作用，因此.parent的margin-bottom: 10px不受影响。 请注意，虽然正常流程中的任何后续元素将向上移动1px ，但这主要是由于.child.negative元素的负边距; 换句话说，步骤1的副作用。

这就是它的全部内容。

Answer 2

当你使用.negative { margin-bottom: -1px; } .negative { margin-bottom: -1px; }然后它会在上面移动。 看这个例子。

请参阅您理解的以下链接。 http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

body {
  background: white;
  padding: 45px;
}

.parent {
  border: 1px solid black;
  margin-bottom: 10px;
  min-height: 30px;
}

.negative {
  margin-bottom: 20px;
}

结论：

例如，在你的情况下，我必须将min-height:30px添加到父类，以便它保持fix 。 如果仅在向负类添加positive margins时移动。 这只是因为你可以看到上图中的结果，告诉你所需要的是什么。

看到cssdesk链接点击这里cssdesk

希望，它会帮助你。 干杯。 ！

Answer 3

当外部元素没有边框，填充和内容而不是自身时，第一个和最后一个元素的边距将应用于外部元素。

在您的情况下，父节点具有边框，因此在这种情况下，边距折叠将不适用。 由于你的子节点里面有margin-bottom = -1px，当计算子节点的外部高度时，它的内容高度为+ padding + border-width + margin。 因此，从外部测量时，它将减少1px。 这就是为什么父节点的高度比上面的例子小1px的原因。 要更清楚地看到它，您可以将背景应用于子节点，例如黄色，您会发现子节点将与父节点的边界重叠。

但是，如果删除父节点的边框，则会出现完全不同的情况。

例如，解释保证金崩溃，比如说你有

<div style="background-color:black">
  <div style="height:10px; background-color:white; margin-top: 10px"></div>
</div>

您将看不到10px高度的黑盒子，因为外部节点将被视为顶部有10px的边距，而内部节点的边距将被忽略。 而对于负面情况，外部边际将减少。

从规格报价：

当两个或多个边距折叠时，生成的边距宽度是折叠边距宽度的最大值。 在负边距的情况下，负邻接边距的绝对值的最大值从正邻接边距的最大值​​中减去。 如果没有正边距，则从零中扣除相邻边距的绝对值的最大值。

有关详细信息： https ： //developer.mozilla.org/en-US/docs/CSS/margin_collapsing