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
`animation`	`animation-delay` `animation-direction` `animation-duration` `animation-fill-mode` `animation-iteration-count` `animation-name` `animation-play-state` `animation-timing-function`
`background` #2	`background-attachment` `background-clip` `background-image` `background-origin` `background-position` `background-repeat` `background-size`
`border` #2	`border-bottom` `border-left` `border-right` `border-top`
`border-block-end`	`border-block-end-color` `border-block-end-style` `border-block-end-width`
`border-block-start`	`border-block-start-color` `border-block-start-style` `border-block-start-width`
`border-bottom` #2	`border-bottom-color` `border-bottom-style` `border-bottom-width`
`border-color` #2	`border-bottom-color` `border-left-color` `border-right-color` `border-top-color`
`border-image`	`border-image-outset` `border-image-repeat` `border-image-slice` `border-image-source` `border-image-width`
`border-inline-end`	`border-inline-end-color` `border-inline-end-style` `border-inline-end-width`
`border-inline-start`	`border-inline-start-color` `border-inline-start-style` `border-inline-start-width`
`border-left` #2	`border-left-color` `border-left-style` `border-left-width`
`border-radius`	`border-bottom-left-radius` `border-bottom-right-radius` `border-top-left-radius` `border-top-right-radius`
`border-right` #2	`border-right-color` `border-right-style` `border-right-width`
`border-style` #2	`border-bottom-style` `border-left-style` `border-right-style` `border-top-style`
`border-top` #2	`border-top-color` `border-top-style` `border-top-width`
`border-width` #2	`border-bottom-width` `border-left-width` `border-right-width` `border-top-width`
`caret`	`caret-color` `caret-shape`
`column-rule` #2	`column-rule-color` `column-rule-style` `column-rule-width`
`columns` #2	`column-count` `column-width`
`content-zoom-limit`	`content-zoom-limit-max` `content-zoom-limit-min`
`content-zoom-snap`	`content-zoom-snap-points` `content-zoom-snap-type`
`cue`	`cue-after` `cue-before`
`flex`	`flex-basis` `flex-grow` `flex-shrink`
`flex-flow`	`flex-direction` `flex-wrap`
`font` #2	`font-family` `font-size` `font-stretch` `font-style` `font-variant` `font-weight` `line-height`
`font-variant` #2	`font-variant-alternates` `font-variant-caps` `font-variant-east-asian` `font-variant-ligatures` `font-variant-numeric`
`grid` #2	`grid-auto-columns` `grid-auto-flow` `grid-auto-rows` `grid-column-gap` `grid-row-gap` `grid-template-areas` `grid-template-columns` `grid-template-rows`
`grid-area`	`grid-column-end` `grid-column-start` `grid-row-end` `grid-row-start`
`grid-column`	`grid-column-end` `grid-column-start`
`grid-gap`	`grid-column-gap` `grid-row-gap`
`grid-row`	`grid-row-end` `grid-row-start`
`grid-template`	`grid-template-areas` `grid-template-columns` `grid-template-rows`
`layout-grid`	`layout-grid-char` `layout-grid-line` `layout-grid-mode` `layout-grid-type`
`list-style` #2	`list-style-image` `list-style-position` `list-style-type`
`margin`	`margin-bottom` `margin-left` `margin-right` `margin-top`
`mask`	`mask-clip` `mask-composite` `mask-image` `mask-mode` `mask-origin` `mask-position` `mask-repeat` `mask-size`
`mask-border`	`mask-border-outset` `mask-border-repeat` `mask-border-slice` `mask-border-source` `mask-border-width`
`motion`	`motion-offset` `motion-path` `motion-rotation`
`outline` #2	`outline-color` `outline-style` `outline-width`
`padding`	`padding-bottom` `padding-left` `padding-right` `padding-top`
`pause`	`pause-after` `pause-before`
`place-content`	`align-content` `justify-content`
`place-items`	`align-items` `justify-items`
`place-self`	`align-self` `justify-self`
`rest`	`rest-after` `rest-before`
`scroll-snap-margin`	`scroll-snap-margin-bottom` `scroll-snap-margin-left` `scroll-snap-margin-right` `scroll-snap-margin-top`
`scroll-snap-padding`	`scroll-snap-padding-bottom` `scroll-snap-padding-left` `scroll-snap-padding-right` `scroll-snap-padding-top`
`text-decoration` #2	`text-decoration-color` `text-decoration-line` `text-decoration-style`
`text-emphasis`	`text-emphasis-color` `text-emphasis-style`
`transition`	`transition-delay` `transition-duration` `transition-property` `transition-timing-function`
`vertical-align` #2	`alignment-baseline` `baseline-shift`

stylelint Related Rules

declaration-block-no-redundant-longhand-properties