Even though you can define any group of properties together in a CSS rule, some of them will be ignored due to the display of the element. This leads to extra cruft in your CSS and misunderstandings around how a rule should work.

For display: inline, the width, height, margin-top, margin-bottom, and float properties have no effect because inline elements don't have a formal box with which to apply the styles. The margin-left and margin-right properties still work reliably for indentation purposes but the other margin settings do not. The float property is sometimes used as a fix for the IE6 double-margin bug.

Other general rules based on display are:

• display: inline-block should not use float.
• display: block should not use vertical-align.
• display: table-* should not use margin (and all variants) or float.

Removing the ignored or problematic properties decreases file size thereby improving performance.

Rule ID: display-property-grouping

This rule is aimed at flagging properties that don't work based with the display property being used. The ultimate goal is to produce a smaller, clearer CSS file without unnecessary code. As such, the rule warns when it finds:

• display: inline used with width, height, margin, margin-top, margin-bottom, and float.
• display: inline-block used with float.
• display: block used with vertical-align.
• display: table-* used with margin (and all variants) or float.

The following patterns are considered warnings:

/* inline with height */ .mybox { display: inline; height: 25px; } /* inline-block with float */ .mybox { display: inline-block; float: left; } /* table-cell and margin */ .mybox { display: table-cell; margin: 10px; }

The following patterns are considered okay and do not cause warnings:

/* inline with margin-left */ .mybox { display: inline; margin-left: 10px; } /* table and margin */ .mybox { display: table; margin-bottom: 10px; }

• The IE5/IE6 Doubled Float Margin Bug