Skip to content

Files

Latest commit

 

History

History
107 lines (73 loc) · 3.36 KB

declaration-block-no-ignored-properties.md

File metadata and controls

107 lines (73 loc) · 3.36 KB

Pattern: Ignored property in declaration block

Issue: -

Description

Disallow property values that are ignored due to another property value in the same rule.

Certain property value pairs rule out other property value pairs, causing them to be ignored by the browser. For example, when an element has display: inline, any further declarations about width, height and margin-top properties will be ignored. Sometimes this is confusing: maybe you forgot that your margin-top will have no effect because the element has display: inline, so you spend a while struggling to figure out what you've done wrong. This rule protects against that confusion by ensuring that within a single rule you don't use property values that are ruled out by other property values in that same rule.

The rule complains when it finds:

  • display: inline used with width, height, margin, margin-top, margin-bottom, overflow (and all variants).
  • display: list-item used with vertical-align.
  • display: block used with vertical-align.
  • display: flex used with vertical-align.
  • display: table used with vertical-align.
  • display: table-* used with margin (and all variants).
  • display: table-* (except table-cell) used with vertical-align.
  • display: table-(row|row-group) used with width, min-width or max-width.
  • display: table-(column|column-group) used with height, min-height or max-height.
  • float: left and float: right used with vertical-align.
  • position: static used with top, right, bottom, or left.
  • position: absolute used with float, clear or vertical-align.
  • position: fixed used with float, clear or vertical-align.

Examples

The following patterns are considered violations:

a { display: inline; width: 100px; }

display: inline causes width to be ignored.

a { display: inline; height: 100px; }

display: inline causes height to be ignored.

a { display: inline; margin: 10px; }

display: inline causes margin to be ignored.

a { display: block; vertical-align: baseline; }

display: block causes vertical-align to be ignored.

a { display: flex; vertical-align: baseline; }

display: flex causes vertical-align to be ignored.

a { position: absolute; vertical-align: baseline; }

position: absolute causes vertical-align to be ignored.

a { float: left; vertical-align: baseline; }

float: left causes vertical-align to be ignored.

The following patterns are not considered violations:

a { display: inline: margin-left: 10px; }
a { display: inline: margin-right: 10px; }
a { display: inline: padding: 10px; }
a { display: inline-block; width: 100px; }

Although display: inline causes width to be ignored, inline-block works with width.

a { display: table-cell; vertical-align: baseline; }

Although display: block causes vertical-align to be ignored, table-cell works with vertical-align.

a { position: relative; vertical-align: baseline; }

Although position: absolute causes vertical-align to be ignored, relative works with vertical-align.

Further Reading