HTML Guides for units

In CSS, most numeric values represent a length, time, angle, or other dimension, and the unit tells the browser how to interpret the number. Writing padding: 20 is ambiguous — does it mean 20 pixels, 20 ems, or 20 percent? Without a unit, the browser has no way to determine the author’s intent, so it treats the value as invalid and discards the entire declaration. This can lead to broken layouts, missing spacing, or other visual problems that are difficult to debug.

The only exception to this rule is 0. Zero pixels is the same as zero ems, zero rems, or zero percent — it’s always nothing regardless of the unit. Because of this, the CSS specification allows 0 to be written without a unit. In fact, omitting the unit on zero values is considered a best practice for cleaner, more concise CSS.

This validation error commonly appears in inline style attributes, which is where the W3C HTML Validator encounters it. However, the same rule applies to CSS written in <style> elements and external stylesheets.

Common causes of this error include:

• Accidentally forgetting to type the unit after a number.
• Copy-pasting values from design tools that don’t include units.
• Confusing CSS with JavaScript’s element.style.width = "50" pattern (where some APIs accept unitless numbers).
• Assuming that px is the default unit (it is not — there is no default unit in CSS).

Examples

Incorrect — missing units on numeric values

<div style="margin: 10; padding: 20; width: 300;">
  Content here
</div>

The validator will report errors for 10, 20, and 300 because none of them have units.

Correct — units specified on all non-zero values

<div style="margin: 10px; padding: 20px; width: 300px;">
  Content here
</div>

Correct — zero without a unit

<div style="margin: 0; padding: 0; border: 0;">
  No units needed for zero
</div>

Correct — mixing zero and non-zero values

<div style="margin: 0 10px 0 20px;">
  Top and bottom margins are zero, sides have units
</div>

Correct — using other unit types

<p style="font-size: 1.2em; line-height: 1.5em; margin-bottom: 2rem;">
  Text with relative units
</p>

Note that line-height is a special case in CSS — it actually accepts a unitless number (like 1.5) as a valid value, where the number acts as a multiplier of the element’s font size. This is not the same as a missing unit; it’s a deliberately unitless ratio defined in the specification. Most other properties do not have this behavior.