css div之间的垂直差距

Question

我知道这是一个常见问题,但我似乎无法找到有效的解决方案.我有这样的设置:

 <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也有同样的问题.这可能是一些众所周知的修复,但我无法找到特定于我的案例的解决方案.

Answer 1

请看这里的相关问题:

为什么父元素不包含保证金？

其中提出了关于保证金崩溃的伟大文章:

http://reference.sitepoint.com/css/collapsingmargins

这篇文章确实有一些指示.

答案是H1上的边距与其父(.content-area)边距(在这种情况下为0)崩溃,因此父div占据H1边际.为了防止这种情况,父div(.content-area)需要有一个填充集或边框或设置的东西以防止崩溃(在我的情况下,正确地将我的两个div组合在一起)