最小高度和边距

Question

考虑以下HTML：

.top {
  min-height: 150px;
}

p {
  margin: 50px;
}

div {
  background-color: #eee;
}

<div class="top">
  <p>Welcome</p>
</div>
<div class="content">Main content</div>

你可以在这里看到它：

http://jsfiddle.net/Lp4tp/1

问题

在Chrome中（对于Ubuntu），似乎p标签上定义的边距导致顶部div与其周围元素之间的间距，而不是扩展顶部div并产生相当于添加50像素填充的内容在顶部div。

这是正确的行为吗？如果是这样，我怎样才能确保顶部div中的子元素不能在顶部div和内容div之间创建不需要的空间。

注意

如果我使用固定高度而不是最小高度，则顶部和内容div之间的间距会消失，但顶部仍会在其上方产生50像素的空白区域。

Answer 1

你的margins collapse。在div上修复overflow:auto：

div {
    background-color: #eee;
    overflow:auto;
}

jsFiddle example

  

块的顶部和底部边距有时会合并（折叠）   单个保证金，其大小是合并的最大边际   进入它，一种称为边缘崩溃的行为。

您还可以为div添加边框以获得相同的结果。

Answer 2

添加到p

display:inline-block;