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.

## Noncompliant Code Example

    /* Noncompliant: 'display: inline' defined along with 'height' */
    .mybox {
      display: inline;
      height: 25px;
    }

    /* Noncompliant: 'display: inline-block' defined along with 'float' */
    .mybox {
      display: inline-block;
      float: left;
    }

    /* Noncompliant: 'display: table-cell' defined along with 'margin' */
    .mybox {
      display: table-cell;
      margin: 10px;
    }

## Compliant Code Example

    .mybox {
      display: inline;
      margin-left: 10px;
    }

    .mybox {
      display: table;
      margin-bottom: 10px;
    }

## stylelint Related Rules

- declaration-block-no-ignored-properties