margines na elemencie h1 wewnątrz div
Mam kontener div, w którym znajduje się element h1:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
Zastosowałem margines górny, lewy margines i margines prawy do elementu nagłówka. Jednak margines górny nie jest stosowany do pola elementu nagłówka wrt do zawierającego div. Zamiast tego górny margines jest stosowany do zawierającego div. Lewy i prawy margines nagłówka są stosowane do pola elementu nagłówka wrt zawierającego div.
Reguły stylu dla div i nagłówka są następujące:
#header {
background: blue;
height: 150px;
}
h1{
background: orange;
margin-top:30px;
margin-left: 10px;
margin-right: 10px;
}
Jaki jest powód tego zachowania?