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;
}

直播示例here。

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

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

Answer 1

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

Section 8.3.1包含所有细节。它还涵盖了嵌套框之间相邻边距的行为，以及负边距。

但是，您在此处看到的是不保证金崩溃的影响，因为您已在border: 1px solid black规则中使用.parent声明对其进行了否定。这意味着在那里设置边框可以防止.parent边距与.child.negative边距完全折叠。

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

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


...

后代框有negative margins，导致它部分位于框外。

所以这里发生的事情是：

从.child.negative元素的实际高度（.parent）中减去1px元素的负边距的绝对值。
因此，.child.negative元素本身溢出.parent（因为其自身高度未更改，任何overflow的默认div为{{ 1}}）。
由于此处的保证金合并无法生效，因此visible中的margin-bottom: 10px不受影响。请注意，虽然正常流程中的任何后续元素都会向上移动.parent，但这主要是由于1px元素的负边距;换句话说，步骤1的副作用。

这就是它的全部内容。

Answer 2

当您使用.negative { margin-bottom: -1px; }时，它会移到顶部。看这个例子。

enter image description here

请参阅您理解的以下链接。 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链接click here 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的边距，而内部节点的边距将被忽略。而对于负面情况，外部利润率会下降。

引自spec：

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

欲了解更多信息： https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing

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

标记

CSS

3 个答案: