为什么 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中文网其他相关文章！