margin on h1 element inside a div

Question

I have a div container which has a h1 element within it:

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

I have applied a margin-top,a margin-left and a margin-right to the header element. However the margin-top is not being applied to the header element box wrt to the containing div. Instead the top margin is being applied to the containing div. The left and right margins of the header are being applied to the header element box wrt the containing div.

The style rules for the div and header are as follows:

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

What is the reason for this behavior?

Solution 1

Your 'problem' is that margins in CSS will collapse onto eachother.

Read this awesome article explaining the concept, management summary:

In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

In your case, specifically read the section "Collapsing Margins Between Parent and Child Elements" a few pages down. In your case, the following CSS 2.1 rule applies:

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

Solution 2

Well, the solution is to add overflow: hidden; property to your header element.
Here JsFiddle.