Small padding, big difference

Question

If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).

html:

Answer 1

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;
}