我知道这是一个常见的问题,但似乎找不到有效的解决方案.我有一个这样的设置：
<div id="wrapper">
<div class="content-area-top"></div>
<div class="content-area">
<h1>Title</h1>
some other text
</div>
</div>
.content-area-top {
height: 12px;
width: 581px;
background-image: url(images/content-top.jpg);
}
.content-area {
margin-left: 10px;
margin-right: 10px;
background-color: #e9ecfd;
}
问题在于.content-area-top和.content-area之间有差距. .content-area-top div的大小可以包含一个背景图片,给我所需的圆角.
我知道这个问题的原因是H1标签有一个(浏览器默认)顶部边距设置(.67em),但是我不愿意将其边距设置为0,我不明白为什么它的边距适用于外部’它包含div.
我在Mac上使用chrome,但是firefox有同样的问题.这可能是一些众所周知的修复,但是我找不到一个我案例的具体解决方案.
解决方法
看到这里有一个相关的问题：
Why would margin not be contained by parent element?
其中提出了一篇关于边际崩溃的伟大文章：
http://reference.sitepoint.com/css/collapsingmargins
该文章确实有一些指针.
答案是H1上的余量与其父(.content-area)边距(在这种情况下为0)崩溃,因此父div在H1边缘上.为了防止这种情况,父div(.content-area)需要有一个填充集或边框或某些设置来防止崩溃(在我的情况下,我的两个div正确集合)
