為什麼子元素的上邊距超出無邊界父元素？

父元素缺少邊框時的上邊距縮排

遇到上邊距元素超出邊界的場景時它的父元素沒有頂部邊框，這可能會令人困惑。這種縮排可能會導致佈局中出現不必要的間距。

在此特定範例中，橘色 div 嵌套在沒有頂部邊框的綠色 div 內。儘管上邊距為 30 像素，但橙色 div 仍突出到其父級下方。

要解決此問題，一個可能的解決方案是為綠色 div 引入頂部邊框。但是，如果設計要求無邊框頂部邊緣，則這可能不可行。

另一種方法是將「overflow: auto」應用於綠色 div (.body)。此技術可防止元素之間的邊距塌陷，從而有效地將橙色 div 包含在其父級邊界內。

下面的CSS 程式碼片段示範了此解決方案的實作：

透過應用此修復後，橘色div 將不再縮排到綠色div 之外，從而使佈局保持其預期間距。

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