为什么子元素的上边距超出无边界父元素？

父元素缺少边框时的上边距缩进

遇到上边距元素超出边界的场景时它的父元素没有顶部边框，这可能会令人困惑。这种缩进可能会导致布局中出现不需要的间距。

在此特定示例中，橙色 div 嵌套在没有顶部边框的绿色 div 内。尽管上边距为 30 像素，橙色 div 仍突出到其父级下方。

要解决此问题，一种可能的解决方案是为绿色 div 引入顶部边框。但是，如果设计要求无边框顶部边缘，则这可能不可行。

另一种方法是将“overflow: auto”应用于绿色 div (.body)。此技术可防止元素之间的边距塌陷，从而有效地将橙色 div 包含在其父级边界内。

下面的 CSS 代码片段演示了此解决方案的实现：

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

通过应用此修复后，橙色 div 将不再缩进到绿色 div 之外，从而使布局保持其预期间距。

以上是为什么子元素的上边距超出无边界父元素？的详细内容。更多信息请关注PHP中文网其他相关文章！