CSS box-model margin WTF

Why the heading margin would push the .content box ? Why adding a padding to .content would resolve this strange behavior ?

HTML

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.1.0/normalize.css">
<div class="header"></div>

<div class="content">
    <h1>Hello</h1>
    <p>This is the content.</p>
</div>

SCSS

body {
    background: blue;
}
.content{
    width:400px;
    -mox-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    padding:10px;
}

.header {
    background: green;
    height: 100px;
}

.content {
    background: yellow;
    /* Uncomment this line to see the different box-model behavior */
    /* padding: 0.1px; */
}

h1 {
    /* Headings have top margins because of normalize.css */
}

JavaScript

/*

Why the heading margin would push the .content box ?

Why adding a padding to .content would resolve this strange behavior ?

*/