如何防止具有'margin-top”的子 Div 和没有顶部边框的父 Div 之间的边距崩溃？

CSS：当父 Div 缺少上边框时管理 Margin-top

当子元素有 margin-top 并且其父元素缺少上边框时，子元素元素的边距可能会造成视觉上的不一致。如提供的图像所示，橙色 div 似乎将绿色 div 向下推，尽管后者没有顶部边框。

要解决此问题而不向父 div 添加边框，您可以实现防止边距崩溃的解决方案。边距折叠是一种 CSS 行为，当相邻元素（在本例中为绿色和橙色 div）的边距折叠成单个边距时会发生这种行为。

要防止边距折叠，请将以下 CSS 添加到父元素：

overflow: auto;

将overflow:auto应用于所提供的CSS片段中的.body将防止边距折叠并保持所需的视觉排列。您可以在 W3C 规范中找到有关边距折叠的更多详细信息：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

以上是如何防止具有'margin-top”的子 Div 和没有顶部边框的父 Div 之间的边距崩溃？的详细内容。更多信息请关注PHP中文网其他相关文章！