html - div之间的css垂直间隙

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 的大小可以包含一个背景图片，它可以提供我想要的圆 Angular 。

我知道这个问题是因为 H1 标签有一个(浏览器默认的)顶部边距设置 (.67em)，但我不愿意将它的边距设置为 0，而且我不明白为什么它的边距在其包含的 div 的“外部”应用。

我在 Mac 上使用 chrome，但是 firefox 有同样的问题。这可能是一些众所周知的修复方法，但我找不到针对我的案例的解决方案。

Answer 1

相关问题请看这里:

Why would margin not be contained by parent element?

其中介绍了一篇关于 margin 崩溃的精彩文章:

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

这篇文章确实有一些建议。

答案是 H1 的边距与其父(.content-area)边距(在本例中为 0)一起折叠，因此父 div 占据了 H1 边距。为了防止这种情况，父 div (.content-area) 需要设置填充或边框或其他设置以防止折叠(在我的例子中，这将我的两个 div 正确地放在一起)