Small padding, big difference - html

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:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.

Answer 1

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.

Answer 2

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

Answer 3

Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}

Answer 4

set h1 margin to 0
h1 {
margin: 0;
}

Answer 5

It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px

Answer 6

<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.

Answer 7

You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.