Opposites Attract in Internet Explorer

Let's start off with the code example:

<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.