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

发布于 2024-09-01 10:07:59 字数 434 浏览 8 评论 0原文

我在 div 中有一个元素,它有一个背景图像。在 div 下方我有另一个 div 和另一个背景图像。现在的问题是,如果第一个 div 中包含的最后一个元素应用了 margin-bottom,那么 2 个 div 之间将会有一个间隙,如下所示:

屏幕截图 http://img40.imageshack.us/img40/5603/littlesnapperh.png

注意由 h2 元素的 margin-bottom 属性引起的灰色间隙包含在第一分区。我知道如果我将 margin-bottom 切换为 padding-bottom 就可以解决这个问题,但是如果我需要 margin-bottom 怎么办?

如何解决这个问题?

I have an element in a div, which has a background image. Below the div I have another div with another background image. Now the problem is that if the last element contained in the first div has margin-bottom applied there will be a gap between the 2 divs like this:

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

Notice the gray gap caused by the margin-bottom property of the h2 element contained within the first div. I know this can be solved if I switch margin-bottom to padding-bottom but what if I need margin-bottom?

How to fix this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

等往事风中吹 2024-09-08 10:07:59

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

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

This is a feature known as collapsing margins. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

The easiest way around (aside of replacing the margin with padding as you suggest) is to add a small (1px) invisible border or padding to the outer element.

半边脸i 2024-09-08 10:07:59

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

Probably something to do with overflow:hidden or one of the elements not clearing properly. If add overflow:hidden to the first div it might fix it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文