html - parent 的填充将 child 的边距变成高度扩展

Question

有一个 block :

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

及其风格:

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

这是结果:

好吧，但是当我将 padding-top 添加到 .block 时，结果不同:

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

结果:

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

您可以查看 fiddle :http://jsfiddle.net/YFU2f/2/和 http://jsfiddle.net/YFU2f/3/

Answer 1

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

在您的示例中，您在 p 元素上定义的上边距与 body 元素的上边距折叠(默认情况下通常为 8px)，因此在最后， Canvas 顶部与p内容框顶部的距离为50px。如果引入padding，就变成了8px+1px+50px=59px。您还可以通过查看 div 的背景注意到边距的折叠:当边距折叠时，就好像 50px 边距仅为 body 声明.

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