What Works for Me

Okay so, I was writing a page, and I noticed that a div I created had a magic margin on the bottom (I tested this by setting a background-color on the div, and it showed up). The magic margin was 3 pixels tall, and despite my setting of the div and all its child nodes to be a certain height, the magic margin still showed up.

I did notice that when I made the div contents to all be on one line, the magic margin disappeared. So I browsed around the web looking for solutions, and discovered that IE adds space after images if you put a linebreak into your code. Said another way: If you have an img tag, and you hit enter in your code before you start writing another element, you’ll have a magic 3 pixel margin below your image. I tested this between IE6 and Firefox, and only found this behavior in IE6.

But I have a wonderful solution! I messed around with CSS code for a little while, and figured out this fix:

CSS:

img
{
   *margin-bottom: expression("-3px");
}

This will automatically subtract the 3 pixel margin that IE6 adds below images. And this code only affects IE6, since the CSS rule starts with a * (thanks Hector in the comments of this post at Ajaxian!).

The only caveat to this fix is that, if you start putting content immediately after your img tags without hitting return/inserting a linebreak, you’ll have some slightly-squeezed content, as the -3px margin will still be enabled, pulling the content below it 3 pixels closer. But who writes code like that?

Take care, and happy coding!!

css, html