css div之间的垂直间隙 [英] css vertical gap between divs

问题描述

我知道这是一个常见的问题，但我似乎找不到一个解决方案工作。我有这样的设置：

I know this is a common problem but I can't seem to find a solution that works. I have a setup like this:

 <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的大小设置为包含一个背景图片，它给了我想要的圆角。

The problem is that there is a gap between .content-area-top and .content-area. the .content-area-top div is sized to contain a background image that gives me the rounded corners that I want.

我知道这个问题是由于H1标签有一个（浏览器默认）顶部边距设置（.67em），但我不愿意将其边距设置为0，我不知道为什么它的边缘适用于其外部的div。

I know that issue comes form the fact that the H1 tag has a (browser default) top margin set (.67em), but I'm unwilling to set its margin to 0, and I don't see why its margin applies 'outside' its containing div.

我在Mac上使用chrome，但是firefox也有同样的问题。

I'm using chrome on Mac, but firefox has the same issue. This is probably some well-known fix, but I couldn't find a a solution specific to my case.

推荐答案

请参阅这里的解决方案。相关问题：

See here for a related question:

为什么父元素不包含边距？

其中提供了一篇关于边距折叠的文章：

in which a great article on margin collapse is presented:

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

文章确实有一些指针。

The article does have some pointers.

答案是H1上的边距与其父（.content-area）边距（在这种情况下为0）折叠，因此父div占用H1保证金。为了防止这种情况，父div（.content-area）需要有一个填充集或一个边框或某事设置，以防止崩溃（在我的例子中，把我的两个div合在一起）

The answer is that the margin on H1 collapses with its parent(.content-area) margin (0 in this case), and so the parent div takes on the H1 margin. To prevent that, the parent div (.content-area) needs to have a padding set or a border or something set to prevent the collapse (which, in my case, brings my two divs together correctly)

这篇关于css div之间的垂直间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！