When/Why Do CSS Property Values Need to Specify "px"?

Question

I have noticed that CSS property values sometimes default to using "px", even if this is not specified. However, for other properties, not specifying the unit is an error. Why is this? In general, which properties need "px" and which ones default to "px"?

Here are a couple examples of each type of property. I am using the latest version of Firefox on Ubuntu:

• Defaults to "px":

  • margin/padding
    • also margin-left, padding-right, etc.
  • width/height

• Ignored/errors out if no unit:

  • padding-inline, margin-block, etc.
    • also margin-block-start, padding-inline-end, etc.
  • border-radius
    • also border-radius-top-left, etc.

I notice the "ignored" list is newer. width/height/padding/margin are as old as the hills, border-radius is a bit newer, and padding/margin-inline/block are brand-new and not even in Edge yet as I'm writing this. Does age have something to do with this? Was there some sort of standardization of property values at some point in the past, and the CSS maintainers didn't want to require units for the older properties because it would break older websites?

Why do some CSS properties need the unit & some default to "px"?

Answer 1

All CSS properties that take a length value require units (of which px is an example) for values other than 0.

This has always been the rule for CSS, so this is nothing to do with the maintainers of the CSS specification.

For backwards compatibility with the buggy browsers of the 1990s, when the page's Doctype triggers quirks mode, lengths default to px units. This is an intentional emulation of bugs by browser developers.

I assume that this backwards compatibility rule does not apply for newer properties that didn't exist in the days that those browsers were around.

---

Always use a Doctype that triggers Standards mode. The inconsistencies of Quirks mode are more trouble then they are worth. Always specify units for non-zero lengths.