margin-bottom a bit of a cross browser grey area

When i use margin-bottom is CSS, t开发者_如何学编程he results vary across browsers (esp lovely IE) what impacts the CSS property "Margin" what other rules do i need to check i've implemented before i can see a consistent result across all browsers...

Some browsers (IE) collapse margins. It doesn't just affect the bottom margin, but also the top.

If you have two stacked elements, both with a margin of margin: 10px 0 15px;, you might think there would be 25px of space between the two. However, IE collapses the margins so all that's left is the greatest margin (which is 15px in the example above).

As to helping ensure browsers display things consistently, a good place to start is a good reset stylesheet (Eric Meyer's or YUI's for example).

I would look up things like 'ie box model bugs' to understand some of the quirks. Most times, if you're seeing different margins, it may because the element also has some padding that's being interpreted differently.

But if you can provide more detail, we can elaborate more!