margin on h1 element inside a div

Question

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

 
Enlighten Designs

I h

Answer 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.