css - 为什么具有上边距的子元素不会拉伸(stretch)父容器

Question

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

HTML

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

CSS

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

比照http://jsfiddle.net/adt515ww/

Answer 1

这是由于 collapsing margins 。要解决此问题，请在您的 div 中添加 Overflow:auto:

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

<强> jsFiddle example