div 最后一个元素的 margin-bottom 属性不会“扩展”该div
我在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是一个称为折叠边距的功能。请参阅: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.
可能与溢出有关:隐藏或元素之一未正确清除。如果将溢出:隐藏添加到第一个 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.