margen en el elemento h1 dentro de un div

Tengo un contenedor div que tiene un elemento h1 dentro de él:

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

He aplicado un margen superior, un margen izquierdo y un margen derecho al elemento de encabezado. Sin embargo, el margen superior no se está aplicando a la caja del elemento del encabezado wrt al div que lo contiene. En su lugar, el margen superior se aplica a la división que contiene. Los márgenes izquierdo y derecho del encabezado se aplican a la caja del elemento del encabezado y el div que contiene.

Las reglas de estilo para el div y el encabezado son las siguientes:

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

¿Cuál es la razón de este comportamiento?