div 的最后一个元素的 margin-bottom 属性不会“扩展” div答案

【问题标题】：margin-bottom property of a div's last element doesn't "extend" the divdiv 的最后一个元素的 margin-bottom 属性不会“扩展” div
【发布时间】：2023-03-14 10:00:01
【问题描述】：

我在 div 中有一个元素，它有一个背景图像。在 div 下面我有另一个带有另一个背景图像的 div。现在的问题是，如果第一个 div 中包含的最后一个元素应用了 margin-bottom，那么 2 个 div 之间就会出现这样的间隙：

Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png

请注意第一个 div 中包含的 h2 元素的 margin-bottom 属性导致的灰色间隙。我知道如果我将 margin-bottom 切换到 padding-bottom 可以解决这个问题，但是如果我需要 margin-bottom 怎么办？

如何解决这个问题？

【问题讨论】：

标签： html css margin

【解决方案1】：

这是一种称为折叠边距的功能。见：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

最简单的方法（除了按照您的建议用填充替换边距）是向外部元素添加一个小的 (1px) 不可见边框或填充。

【讨论】：

向外部元素添加了 padding-bottom: 1px 并修复了它。谢谢！
典型的错误被称为功能，因此没有被修复。

【解决方案2】：

可能与溢出有关：隐藏或元素之一未正确清除。如果将 overflow:hidden 添加到第一个 div 它可能会修复它。

【讨论】：