為什麼 Margin-Top 會壓低父級 div，以及如何在不使用邊框的情況下修復它？

如何修復沒有邊框的margin-top 下推父級div

當有margin-top 的子元素位於沒有上邊框的父元素內部時， margin可以下推父元素。這種行為通常是不受歡迎的。一種解決方案是向父元素添加頂部邊框，但這並不總是可能或理想的。

另一個解決方案是在父元素上使用 Overflow: auto 屬性。這將防止邊距折疊並向下推父元素。下面是一個範例：

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 150px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

透過此更改，橘色 div 將不再向下推綠色 div。

以上是為什麼 Margin-Top 會壓低父級 div，以及如何在不使用邊框的情況下修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！