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?