css - 最小高度和边距

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 并产生相当于在顶部 div 上添加 50 个像素的填充。

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

笔记

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

Answer 1

您的 margins collapse .使用 overflow:auto 修复在 div 上:

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

jsFiddle example

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

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