為什麼子元素的上邊距會壓低其父元素的 div？

Margin-Top 將父級Div 向下推：理解並解決問題

許多開發人員在將上邊距應用於頁面上第一個可見元素：它導致父div 下推。為了深入研究此行為的原因並提供解決方案，讓我們分析一下提供的程式碼片段：

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('../../images/name_logo.png') no-repeat;
}

此程式碼定義了一個標題div，其中包含一個包含50px 邊距的巢狀h1 元素。通常，我們希望這個邊距能夠增加 h1 和 header div 上緣之間的空間。然而，它反而導致整個標題 div 下推 50px。

要理解為什麼會出現這種情況，我們需要考慮「區塊格式化上下文」。當套用於頁面上的第一個可見元素時，上邊距會重設區塊格式上下文，導致父 div 被下拉。

此問題的解決方案是將 Overflow: auto 套用到父 div 。這允許父div自動調整其高度以適應其子元素，包括帶有上邊距的h1：

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

透過添加overflow: auto，我們允許標題div垂直調整大小，從而防止它當將上邊距加入h1 元素時，防止被向下推。

以上是為什麼子元素的上邊距會壓低其父元素的 div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！