Why a child element with a top margin doesn't stretch the parent container

Question

Given a div with a child element that have a top margin, why the margin is not inside the parent div but outside ?

HTML

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

CSS

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

possible duplicate of [Margin on child element moves parent element](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element) — Weafs.py, Jan 15 '15 at 22:21

score 11 · Accepted Answer · answered Jan 15 '15 at 22:22

11

That's due to collapsing margins. To fix it add overflow:auto to your div:

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

answered Jan 15 '15 at 22:22

j08691

1 Answers1