margem no elemento h1 dentro de uma div

Eu tenho um contêiner div que tem um elemento h1 dentro dele:

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

Eu apliquei uma margem superior, uma margem esquerda e uma margem direita no elemento do cabeçalho. No entanto, a margem superior não está sendo aplicada à caixa do elemento do cabeçalho, escrita na div que contém. Em vez disso, a margem superior está sendo aplicada à div que contém. As margens esquerda e direita do cabeçalho estão sendo aplicadas à caixa de elemento do cabeçalho na div que contém.

As regras de estilo para a div e o cabeçalho são as seguintes:

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

Qual o motivo desse comportamento?