在父母的边缘填充儿童的边缘进入高度扩大

Question

有一个区块：

<div class="block">
    <p>this is a paragraph this is a paragraph</p>
</div>

它的风格：

.block{background:gray; width:300px}
p{margin-top:50px}

结果如下：

好吧，但是当我向.block添加padding-top时，结果会有所不同：

.block{background: gray; width:300px; padding-top:1px}
p{margin-top:50px;}

结果：

通过向父级添加填充，看起来子级（p）的边距导致扩展。

您可以查看小提琴：http://jsfiddle.net/YFU2f/2/和http://jsfiddle.net/YFU2f/3/

Answer 1

默认情况下，相邻的边距会崩溃，当它们之间引入填充时，它们不再相邻，因此它们会分开。

在您的示例中，您在p元素上定义的上边距会与body元素的上边距（默认情况下通常为8px）折叠，因此最后，画布的顶部和p的内容框的顶部是50px。如果引入填充，则变为8px + 1px + 50px = 59px。您还可以通过查看div的背景来注意边距的崩溃：当边距崩溃时，就好像仅为body宣布50px边距。

您可以在规范中找到所有详细信息：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Answer 2

您需要将display p用作块

p{margin-top:50px;display:inline-block;}