On 2007-08-04, alice <> wrote:
> I've got a div with a bottom margin of 12px. In IE7, the margin is in
> fact 12 px, but in Firefox, it's 30 px. Can someone tell me what's
> going on here and what I can do about it? I'm pretty sure it's not an
> issue along the lines of "Firefox adds 18 px to all bottom margins",
> so what type of issue is this?
Could be margin-collapsing, which IE7 might get wrong (it is a little
complicated to understand). What kind of bottom margin does the div's
container have, and does the container also have zero bottom padding and
border?
This would give the effect you describe for example:
<body>
<div style="margin-bottom: 30px; background-color: red;">
<div style="margin-bottom: 18px; background-color: lavender">
Hello
</div>
</div>
world
</body>
You shouldn't be able to see any red, and there should be 30px between
the bottom of "Hello" and the top of "world".
Similar Threads
