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?