Skip to main content

shorthand-property-no-redundant-values

Disallow redundant values within shorthand properties.

a { margin: 1px 1px 1px 1px; }
/** ↑ ↑ ↑
* These values */

You can use shorthand properties to set multiple values at once. For example, you can use the margin property to set the margin-top, margin-right, margin-bottom, and margin-left properties at once.

For some shorthand properties, e.g. those related to the edges of a box, you can safely omitted some values.

This rule checks the following shorthand properties:

  • margin, margin-block, margin-inline
  • padding, padding-block, padding-inline
  • border-color, border-style, border-width
  • border-radius
  • border-block-color, border-block-style, border-block-width
  • border-inline-color, border-inline-style, border-inline-width
  • gap, grid-gap
  • overflow,
  • overscroll-behavior,
  • scroll-margin, scroll-margin-block, scroll-margin-inline
  • scroll-padding, scroll-padding-block, scroll-padding-inline
  • inset, inset-block, inset-inline

The fix option can automatically fix all of the problems reported by this rule.

The message secondary option can accept the arguments of this rule.

Options

true

The following patterns are considered problems:

a { margin: 1px 1px; }
a { margin: 1px 1px 1px 1px; }
a { padding: 1px 2px 1px; }
a { border-radius: 1px 2px 1px 2px; }
a { -webkit-border-radius: 1px 1px 1px 1px; }

The following patterns are not considered problems:

a { margin: 1px; }
a { margin: 1px 1px 1px 2px; }
a { padding: 1px 1em 1pt 1pc; }
a { border-radius: 10px / 5px; }