為什麼這個 CSS margin-top 樣式不起作用？

Question

我嘗試在另一個 div 內的 div 上新增 margin 值。除了最高值之外，所有工作都正常，它似乎被忽略了。但為什麼呢？

我的期望：

我得到了什麼：

代碼：

#outer {
  width: 500px;
  height: 200px;
  background: #FFCCCC;
  margin: 50px auto 0 auto;
  display: block;
}

#inner {
  background: #FFCC33;
  margin: 50px 50px 50px 50px;
  padding: 10px;
  display: block;
}

<div id="outer">
  <div id="inner">
    Hello world!
  </div>
</div>

W3Schools 沒有解釋為什麼 margin 會出現這種情況。

Answer 1

嘗試在內部div上使用display: inline-block;。就像這樣：

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Answer 2

您實際上看到的是#inner 元素的上邊距折疊到#outer元素的上緣，只保留#outer 邊距完好無損（儘管影像中未顯示） 。兩個盒子的頂部邊緣彼此齊平，因為它們的邊距相等。

以下是 W3C 規範中的相關要點：

您可以執行以下任一操作來防止邊距折疊：

#

上述選項防止邊距折疊的原因是：

左右邊距的表現符合您的預期，因為：

#