6

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

例如，在此标记和随附的 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;
}

现场示例在这里。

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

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

4

3 回答 3

8

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

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

但是，您在这里看到的并不是保证金崩溃的影响，因为您已经在您的规则border: 1px solid black中声明了它。.parent这意味着那里有一个边框可以防止您的.parent边距与您的.child.negative边距完全折叠。

相反，这只是负利润率的工作方式。这在视觉格式化模型的各个部分中都有介绍，但在第 11 节的开头最简洁直接地解决了这一点，总结如下：

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

  • ...
  • 后代盒子有负边距，导致它部分定位在盒子外面。

因此，这里发生的事情是：

  1. 从元素的实际高度.child.negative中减去元素的负边距的绝对值（乘以）。.parent1px

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

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

这就是它的全部。

于 2012-11-03T08:26:22.427 回答
1

当您使用时.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

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

于 2012-11-03T08:18:01.383 回答
-1

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

在您的情况下，父节点有边框，因此在这种情况下不会应用边距折叠。由于您有内部子节点的 margin-bottom = -1px，当计算子节点的外部高度时，它将是其内容的高度 + 填充 + 边框宽度 + 边距。因此，从外部测量时会减少 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

于 2012-11-03T08:03:25.177 回答