Zero Units in CSS: Duration, Frequency, Resolution Require Units

2 minute read, published .

CSS doesn’t usually require zeros to have units — because zero is zero, regardless of units. Since these are all equivalent, the unitless version is often used:

padding: 0px; /*✅*/
padding: 0pt; /*✅*/
padding: 0em; /*✅*/
padding: 0rem;/*✅*/

padding: 0;   /*✅*/

This works for all length-based units and angle-based units, but does not work other types of values.

The CSS spec requires units to be specified for duration, frequency, and resolution values — even for zero.

Length Units
UnitZero With UnitZero Without Unit
em0em0
ex0ex0
ch0ch0
rem0rem0
vw0vw0
vh0vh0
vmin0vmin0
vmax0vmax0
cm0cm0
mm0mm0
Q0Q0
in0in0
pc0pc0
pt0pt0
px0px0
Angle Units
UnitZero With UnitZero Without Unit
deg0deg0
grad0grad0
rad0rad0
turn0turn0
Duration Units
UnitZero With UnitZero Without Unit
s0s
ms0ms
Frequency Units
UnitZero With UnitZero Without Unit
Hz0Hz
kHz0kHz
Resolution Units
UnitZero With UnitZero Without Unit
dpi0dpi
dpcm0dpcm
dppx0dppx

This means that, although leaving units off a zero for transitions seems to be correct, it is in fact invalid:

transition: opacity 0 ease; /*❌*/
transition: opacity 0s ease;/*✅*/

Quirky! For further reading, see CSS Values and Units Module Level 3, Sections 5 and 6.