Pattern: Ignored property in declaration block
Issue: -
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 withwidth
,height
,margin
,margin-top
,margin-bottom
,overflow
(and all variants).display: list-item
used withvertical-align
.display: block
used withvertical-align
.display: flex
used withvertical-align
.display: table
used withvertical-align
.display: table-*
used withmargin
(and all variants).display: table-*
(excepttable-cell
) used withvertical-align
.display: table-(row|row-group)
used withwidth
,min-width
ormax-width
.display: table-(column|column-group)
used withheight
,min-height
ormax-height
.float: left
andfloat: right
used withvertical-align
.position: static
used withtop
,right
,bottom
, orleft
.position: absolute
used withfloat
,clear
orvertical-align
.position: fixed
used withfloat
,clear
orvertical-align
.
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
.