Margin Inheritance Bug in IE 5/6

This is documented in a number of blogs, including Quirksmode, but I wanted to repeat it here as a memo to me.

Some people refer to this as the Margin Doubling Bug, but I think inheritance is what’s really happening so it depends whether you prefer to name by cause or by effect.

The Problem

• Some form elements (esp inputs) inherit the margin of their parent container when you float them. Especially if one uses a fieldset container with margins set.
• This also happens with some non-form elements in particular circumstances (I haven’t made an exhaustive study to determine precisely when this occurs, but if I run across examples, I’ll post them here).
• Trying to set margin:0 on the inheriting element does nothing.
  

The Solutions
Try one of these solutions, in this order, until the problem goes away:

• Set overflow: hidden on the child element
• Set display: inline on the child element
• Wrap the child element in a div and set the float, padding, margin on the div

In my struggles with a floated submit button inheriting a right margin, I had to use the last solution, which is the least preferred since it adds more markup than is really necessary. But even trying to use IE conditional CSS wouldn’t work.