'property: 0' or 'property: 0px' in CSS?

css properties zero
Blender picture Blender · Nov 30, 2010 · Viewed 23.4k times · Source

I've seen this notation used a lot, and I was wondering, is there is any notable difference between these two notations?

element#id
{
  property: 0;
}

and

element#id
{
  property: 0px;
}

I use property: 0px; all the time, as I find it cleaner looking, but I'm not really sure if the browser interprets 0px differently than 0.

Does anyone know which one is better or correct?

Answer

Chris Bier picture Chris Bier · May 10, 2013

Unit identifiers are optional, but there is no noted performance increase (although you are saving two characters).

CSS2 - From W3C CSS 2.1 Specification for Syntax and basic data types:

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

(Emphasis mine)

CSS3 - From W3C CSS Values and Units Module Level 3 (Currently in Candidate Recommendation at the time of this writing)

For zero lengths the unit identifier is optional (i.e. can be syntactically represented as the 0).

Related questions

Modifying CSS class property values on the fly with JavaScript / jQuery

I've run into a unique situation that I have so far been unable to find a solution for: dynamically assigning a value to a CSS style. I know how to use jQuery to assign width, height, etc. to an element, …

Read More
Overflow: overlay doesn't work in firefox

On my website I need to use the css property overflow: overlay for a <div>. However, it is not rendering in the browser and an inspection of the css in firebug shows that it isn't even there, but …

Read More
Are property values in CSS case-sensitive?

I have observed that some CSS properties, like font-family declared with quotation marks, perhaps are case-sensitive, but all other are not... But how web-browsers and "HTML renderers" MUST interpret? Is the same in any CSS context (XML, SVG, etc.) and …

Read More