Browsera Blog Cross-Browser Site Compatibility

Mysterious margins in IE can be caused by document whitespace

Images not lining up right in IE?  If it appears that there is a mysterious margin in IE even when your margins are set to “0″, you’re probably affected by this.  Internet Explorer treats whitespace as significant inside of anchors.

Consider the following example:

<div style="border: 1px solid black; width: 200px;">
    <p style="float: left; margin: 0;">This is some text</p>
    <a style="float: right; " href="#">
        <img src="x.png" />
    </a>
    <div style="clear: both;"></div>
</div>

And the resulting rendering in Internet Explorer 7 and Firefox

If the whitespace surrounding the <img> element is removed, IE places the item in the same place as Firefox!

So, next time you find a mysterious extra margin showing up in IE, remember this tip.

P.S. Sometimes it is undesirable to remove the whitespace formatting.  Another workaround is to apply the style “font-size: 0px” to the anchor element.