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.