Opposites Attract in Internet Explorer

Let's start off with the code example:

this is sample text
<div style="padding:15px;">
    <div><span style="margin-left: -16px; 
        padding-left:15px; background-color: #CCC; 
        border:none;">this </span>is 
        sample text</div>
</div>

What happens in IE and Mozilla is that the background appears to start 16 pixels to the left. Perfect, all is good!

Now try switching the margin-left to be exactly the opposite. In this example, the margin-left is set to -15px and the padding-left is set to 15px.

In Mozilla, everything looks normal. But in IE, the margin and padding collapse and disappear into a black hole.

My initial tests show that this only occurs when setting the margin and padding (left or right, and I'd assume top or bottom) on an inline element.

Published September 07, 2004 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/217

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.