Mam kontener div, w którym znajduje się element h1:

<div id="header">
 <h1>Enlighten Designs</h1>
</div>

Zastosowałem margines górny, lewy margines i margines prawy do elementu nagłówka. Jednak margines górny nie jest stosowany do pola elementu nagłówka wrt do zawierającego div. Zamiast tego górny margines jest stosowany do zawierającego div. Lewy i prawy margines nagłówka są stosowane do pola elementu nagłówka wrt zawierającego div.

Reguły stylu dla div i nagłówka są następujące:

#header {
    background: blue;
    height: 150px;
}
h1{
    background: orange;
    margin-top:30px;
    margin-left: 10px;
    margin-right: 10px;
}

Jaki jest powód tego zachowania?