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的默认值divvisible)。

  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 回答