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

Question

给定带有子元素且具有上边距的div，为什么边距不在父div内但在外部？

HTML

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

CSS

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

cf http://jsfiddle.net/adt515ww/

Answer 1

归因于collapsing margins。要修复它，请添加overflow：auto到你的div：

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

<强> jsFiddle example