Sometimes when editing a rule you may end up defining multiple properties that can better be represented using shorthand. For example:

    .mybox {
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px;
      margin-bottom: 30px;
    }

These four properties can actually be combined into a single `margin` property, such as:

    .mybox {
      margin: 20px 10px 30px;
    }

This rule helps decrease file size by finding properties that can be combined into one.

## Noncompliant Code Example

    .mybox {
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 20px;
      margin-bottom: 30px;
    }

    .mybox {
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 20px;
      padding-bottom: 30px;
    }

## Compliant Solution

    /* Compliant: Shorthand magin property */
    .mybox {
      margin: 20px 10px 30px;
    }

    /* Compliant: Shorthand padding property */
    .mybox {
      padding: 20px 10px 30px;
    }

    /* Compliant: Only two margin properties */
    .mybox {
      margin-left: 10px;
      margin-right: 10px;

    }

    /* Compliant: Only two padding properties */
    .mybox {
      padding-right: 10px;
      padding-top: 20px;
    }

## See

- Related rule: {rule:css:do-not-use-shorthand-properties}

## Shorthand Properties

Property | Shorthand For
--- | ---
[[shorthandProperties]]

## stylelint Related Rules

- declaration-block-no-redundant-longhand-properties