為什么元素的負底部邊距會降低該元素的父級高度？

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