Require properties appropriate for display

ejschladweiler edited this page Aug 27, 2014 · 3 revisions

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 Details

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;
}

Further Reading