Small padding, big difference

This is due to the margin collapsing

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

You can find further information also on w3c site.

Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]

So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.

It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.

If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.

h1 { padding: 0; margin: 0; }
.pad0 {
    background-color: #E9E9E9;
    padding: 0px;
}
.pad1 {
    background-color: #E9E9E9;
    padding: 1px;
}