Rand auf h1 Element innerhalb eines div

Ich habe einen Div-Container, der ein H1-Element enthält:

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

Ich habe dem Header-Element einen Rand nach oben, einen Rand nach links und einen Rand nach rechts zugewiesen. Der obere Rand wird jedoch nicht auf das Header-Elementfeld angewendet, das sich im enthaltenden Div befindet. Stattdessen wird der obere Rand auf das enthaltende Div angewendet. Der linke und der rechte Rand der Kopfzeile werden auf das Feld für das Kopfzeilenelement im übergeordneten Div angewendet.

Die Stilregeln für div und header lauten wie folgt:

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

Was ist der Grund für dieses Verhalten?