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

Question

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?

Bithia

Good question, and earlier than this probable duplicate: https://mcmap.net/q/212220/-size-of-zero-pixels-in-css-with-or-without-39-px-39-suffix-duplicate/292060, but that one has a better answer, quoting the spec. – Egerton

Whichever you use, make sure to stay consistent through the entire project. – Macguiness

Answer 1

While the unit is optional when the value is 0, I tend to leave it in, as I can then tweak the values with Chrome's Developer Tools by clicking on the value and pressing the up/down arrow keys. Without a unit, that isn't really possible.

Also, CSS minifiers strip the units off of 0 values anyways, so it won't really matter in the end.

Bithia

+1 for observing that minifiers know about this, and that theres functionality to be had by including them. – Geld

Chrome's Developer Tools defaults to px if you press the up/down arrow keys on a 0 without an identifier. Also, in Chrome's Developer Tools, if you arrow down to 0, it does keep the px. – Macguiness

@testing123: I don't think it did at the time I wrote this answer, but that's good to know. – Bithia

will there be any execution time issues with 0 and 0px if they are used in multiple places in the application? – Alfrediaalfredo

Answer 2

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).

Salmagundi

Doubt you really save 2 bytes when GZIP compression is active. It's a matter of what you are feeling comfortable with, to me. Some CSS Linters might dislike 0px, though. – Congregationalist

Answer 3

They are the same. The browser interprets both as 0, so go with whatever is more readable for you.

Pleinair

Is there a 'correct' or standards-compliant choice? I know you can't write border: 3 solid, as there are no units, but are there any web standards on zero? – Bithia

As I mention in my answer, it's because they're all identical: zero times anything is still zero, whether you're multiplying by the size of a pixel, an em, an ex, or by percentage. – Defiant

Not sure what you mean by web standards but "margin: 10px 0 0 10px" works fine, as does "border: 0" meaning you can use zero as an equivalent of "none". – Moldau

@blender Check my answer below for the web standards with a link to documentation. – Salmagundi

-1 for an answer with arguable content without any reference, links or rationale. please either back up your opinion with data or clearly state it's just your opinion, not factual information. – Saveloy

Answer 4

Zero of anything is zero. 0px = 0% = 0em = 0pt = 0

Most people leave the unit off because it is simply unnecessary clutter.

Snaffle

An exception is time units: 0 is not a valid alternative to 0s / 0ms – Exarate

My browser shows this differently for 0% and 0 or 0px: jsfiddle.net/q7mad3wz/23 – Hunsaker

Answer 5

As far as I'm aware there is no difference between them, since 0px = 0em = 0ex = 0% = 0. It's purely up to you, as the developer, to decide what you like best (unless you have corporate coding standards that you need to follow, of course).

From most of the code samples I've seen, most people use the unitless version. To me, it just looks cleaner. If you're pushing a significant amount of data (say, if you're Google), those two bytes can add up to a lot of bandwidth, especially since you're quite likely to repeat them multiple times in your stylesheet.

Defiant

I'f you're pushing a significant amount of data (like if you're Google), you had better be using minification tools that do this for you :p – Palaeozoology

Answer 6

Zero pixels is equal to zero inches and zero meters and so forth. 0 is all you need.

Portemonnaie

For a moment there I was going to down vote your post because I was thinking your statement about 0 pixels being equal to 0 inches, and so on was false. :) Because in my mind I was thinking how can that be? they are different units. – Misgiving

Answer 7

I personally find 0 cleaner than 0px. That's two extra characters that can add up. Why add extra bytes when you don't need to. I have see padding: 0px 0px 0px 0px which can easily be expressed as padding: 0 way too often.

Absentee

Answer 8

You can use either - my best advice is not to worry too much but be consistent in doing it either one way or the other. I personally prefer to specify '0px' for the following reasons:

• Using 0px makes things more consistent with all of the other 'px' sizes you've specified
• It's also more verbose and makes it very clear that you're setting a zero length rather than a 'switch this off' flag
• It's slightly easier to tweak a '0px' value to make it another value if required

Unchancy

Answer 9

I know that there should be no difference between 0px and 0 but I've found that sometimes there is.

I was trying to center an object like this:

position: absolute;
left: max(0px, calc((100vw - 400px)/2));
max-width: 400px;   

It works but if you substitute 0px with 0 it doesn't.

Titanesque

Answer 10

If somebody gives you 0 EUR. It is that same like 0 Dollar or 0 Zloty etc. What you got is nothing = 0. That is why in the case of 0 you dont need to set a unit.

Eastman

Answer 11

As the others say, it doesn't really matter if its 0, though I choose to add the measurements to all of my values so anyone else looking at my CSS files can gauge what measurements they're likely to deal with elsewhere.

Amentia

Answer 12

zero-units Zero values don't need units. An easy way to save bytes in CSS is not include units when a value is 0. For instance, 0px and 0 are the exact same ...

http://csslint.net/index.html

Omegaomelet