为什么具有上边距的子元素不会拉伸父容器

Question

给定一个具有上边距的子元素的 div，为什么边距不在父 div 内部而是在外部？

HTML

<div><h1>Titre<h1></div>

CSS

h1 { margin: 20px; }
div { background-color: #DDD; }

cfhttp://jsfiddle.net/adt515ww/

Answer 1

这是由于collapsing margins。要修复它，请在您的 div 中添加溢出：自动：

div {
    background-color:#DDD;
    overflow:auto;
}

jsFiddle example