I was speaking to a chap recently who was having a few layout problems with his site he was building - As he showed me on the screen I knew straight away what the problem was "Collapsing Margins".

Basically if you have two vertical margins meeting they collapse onto each other forming a single margin with the height of the larger of the two margins. Its actually quite simple when you look at it visually, but when trying to explain it in words it sounds more complicated than it is... So.. Queue amazingly drawn Fireworks example!! Hehehe

What you think should happen:

Say you have two divs one above the other, the top DIV has a bottom margin of 25px and the bottom DIV has a top margin of 15px. Put together you'd expect a gap between the divs (The margins) to be 40px ... Right? Wrong...

What actually does happen:

You actually get a gap of 25px - The largest margin height of the two, because the margins collapse into each other leaving only the largest one (Shown below)