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

请点击此处查看相关问题：

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组合在一起）

Answer 2

如果边缘之间存在边界，则边距不应该折叠。因此，您可以添加隐藏边框以防止边距崩溃。

在我测试的FF版本中，以下版本对我有用，Chrome和＆amp; 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>

Answer 3

尝试这种方法：

#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;
}

Answer 4

尝试提供有效的doctype。它对我有用：）

请参阅：A list apart 说得很漂亮！

约杰什

css div之间的垂直差距

4 个答案: