为什么我的div的余量会受到内容/块内容的影响？

Question

我有以下内容：

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

或：

<div>
    some content
</div>

没有：

<p>some content</p> 

...... div的定位不同。似乎div中的块内容正在影响div的外（上）边距。 div被推下来了吗？我认为div内的内容就像一个块一样不会影响包含块的边距。为什么div的边距受其内容的影响？

Answer 1

你在谈论collapsing margins。

请参阅：http://jsfiddle.net/thirtydot/vgJxX/

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

• A 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添加边框或填充。