为什么我的 div 的边距会受到其中的内容/块的影响？

Question

我有以下：

<div>
    <p>some content</p>
</div>

或：

<div>
    some content
</div>

没有：

<p>some content</p> 

...div的定位不同。似乎 div 内部的块内容正在影响 div 的外部（顶部）边距。那么div被推倒了吗？我认为 div 内的内容（如块）不会影响包含块的边距。为什么div的margin会受里面的内容影响？

Answer 1

你说的是collapsing margins。

见：http://jsfiddle.net/thirtydot/vgJxX/

您可以通过添加到父元素来“修复它”：

• border。
• 一些padding。
• position: absolute。
• float: left。

HTML：

<div>
    <p>I'm doing the "broken" thing you hate.</p>
</div>

<div id="d2">
    <p>I'm not!</p>
</div>

<div id="d3">
    <p>Neither am I!</p>
</div>

<div id="d4">
    <p>Me neither!</p>
</div>

CSS：

div {
    background: #ccc
}
p {
    margin: 20px 0
}

#d2 {
    border: 1px solid red
}

#d3 {
    padding: 1px
}

#d4 {
    position: absolute;
    bottom: 0;
    width: 100%
}

Answer 2

因为margin collapsing。为您的 div 添加边框或填充。