為什麼要為頁首添加上邊距會將整個頁首向下推？

標題元素中的 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🎜>

div#header {
  overflow: auto;
  ...
}

要解決此問題，您可以向父div新增Overflow:auto 屬性。當邊距超出其可用空間時，這將導致父 div 滾動，從而防止標題 div 向下移動。

更多詳細信息，請參閱以下連結：

以上是為什麼要為頁首添加上邊距會將整個頁首向下推？的詳細內容。更多資訊請關注PHP中文網其他相關文章！