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

我有以下内容：

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

or:

<div>
    some content
</div>

没有：

<p>some content</p> 

...div的定位不同。看起来 div 内的块内容正在影响 div 的外（顶部）边距。那么div是不是被下推了呢？我认为 div 内的内容（如块）不会影响包含块的边距。为什么 div 的边距会受到其内部内容的影响？

你说的是边缘塌陷.

See: http://jsfiddle.net/thirtydot/vgJxX/

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

• A border.
• Some 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%
}