What's up with margin all of a sudden

Now granted I haven’t done much HTML coding in a while but over the past two weeks I had to code 3 layouts for clients and hit the exact same problem in FF with each one.

You have a container div with a width and height on it, then inside that div you have another block level element, let’s say an h1 tag and you apply margin-top to that h1. The second you do that the outer div moves down, applying the margin-top to it!

The first time it happened I thought I had applied the top margin to the wrong element but looking at the style sheet everything was fine. Being in a hurry I said screw it and applied margin-top to the h1 tag.

Fast forward through 2 other layouts and I keep running into the same problem. Using FF 4 BTW

It’s called ‘collapsing margins’, and that’s what’s supposed to happen … see http://reference.sitepoint.com/css/collapsingmargins for the lowdown on how it works.