Html div之间的css垂直间隙
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2975377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css vertical gap between divs
提问by meecect
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;
}
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.
问题是 .content-area-top 和 .content-area 之间存在差距。.content-area-top 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.
我知道这个问题源于 H1 标签有一个（浏览器默认）顶部边距设置（.67em），但我不愿意将它的边距设置为 0，我不明白为什么它的边距适用于“外部” ' 它包含的 div。
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.
我在 Mac 上使用 chrome，但 firefox 也有同样的问题。这可能是一些众所周知的修复，但我找不到特定于我的案例的解决方案。
回答by meecect
See here for a related question:
有关相关问题，请参见此处：
Why would margin not be contained by parent element?
in which a great article on margin collapse is presented:
其中介绍了一篇关于边距崩溃的精彩文章：
http://reference.sitepoint.com/css/collapsingmargins
http://reference.sitepoint.com/css/collapsingmargins
The article does have some pointers.
文章确实有一些提示。
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)
答案是 H1 上的边距与其父 (.content-area) 边距（在本例中为 0）折叠在一起，因此父 div 占据 H1 边距。为了防止这种情况，父 div (.content-area) 需要设置填充或边框或其他设置以防止折叠（在我的情况下，这将我的两个 div 正确组合在一起）
回答by JasonPlutext
Margins aren't supposed to collapse if there is a border between them. So you can add a hidden border to prevent margin collapse.
如果它们之间有边界，则边距不应该塌陷。所以你可以添加一个隐藏的边框来防止边距折叠。
The following worked for me in my tested versions of FF, Chrome & IE.
以下在我测试过的 FF、Chrome 和 IE 版本中对我有用。
<!-- Set the border-color to your background color.
If default white background colour use #FFFFFF -->
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in blue box</p>
<p >Paragraph 2 in blue box</p>
</div>
<!-- No space here thanks -->
<div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; ">
<p >Paragraph 1 in green box</p>
<p >Paragraph 2 in green box</p>
</div>
回答by Yogesh Pitale
Try giving a valid doctype. It worked for me :)
尝试提供有效的文档类型。它对我有用:)
Refer this : A list apart has said it beautifully!
参考这个：分开的清单说得很漂亮！
Yogesh
约格什
回答by agbb
Try this approach:
试试这个方法：
#content-area-top {
width:581px;
height:12px;
float:left;
background-image:url("images/content-top.jpg");
}
#content-area {
width:561px; /* substract margin left & right values from it's width */
float:left;
display:inline; /* prevent ie6-double-margin bug */
margin:0 10px;
background-color:#e9ecfd;
}
#wrapper {
width:581px;
float:left;
}
