31

Googling for the answer to this question has proven difficult so I figured somebody here should know.

Within CSS, I've seen zero pixels declared as simply '0' yet also as '0px'.

mystyle { width: 0; }

anotherstyle { width: 0px; }

The minor problem with '0' is that if you change it to some non-zero value, you might forget to add the 'px'. And when making a value '0', you may forget to remove the 'px'. I want pure consistency in my code and little things like this drive me nuts.

Does this really come down to a personal preference like where to indent?

They both seem to work but which way is better and why?

Thank-you.

EDIT for clarity:

I wrote "little things like this drive me nuts".

Not having a "px" for 0 is not what I was referring to.

It drives me nuts that there are two different ways of doing the same simple thing.

Personally, despite the minor issue of forgetting to add/remove 'px' where appropriate, I'll continue using '0' by itself knowing it's just as acceptable as the other way.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • "Does this really come down to a personal preference" <- yes | some people would prefer 0 without the px to save space, but that does not make such an big difference... – MacGucky Mar 19 '11 at 00:52
  • 1
    When directly assigning a value, they are equivalent as noted in the linked question 'property: 0' is the same as 'property: 0px'. However, when used inside a calc() they are NOT equvialent: 'property: calc(1px + 0px)' is ok and property: calc(1px + 0)' is invalid. – vbraun Jan 25 '18 at 14:12
  • @vbraun IMO your point is crucial and negates any arguments for using '0' - since such values can be put into css variables, it's difficult to know where they are going to be used, including calc(), and setting such a variable can be part of a component's API so can happen in a very different place to where it is used - we don't want to require the user of a component to have to look into the internals just to see if '0' is acceptable or not. – Max Waterman Feb 05 '21 at 05:08

4 Answers4

37

They are identical.

Use width: 0, because it is shorter and more readable.

Especially when you have, for example:

padding: 0px 0px 9px 8px

vs

padding: 0 0 9px 8px

See the specs:

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.

The minor problem with '0' is that if you change it to some non-zero value, you might forget to add the 'px'. And when making a value '0', you may forget to remove the 'px'

This does not happen once you get into the habit of writing 0 without the unit identifier.

Sparky
  • 98,165
  • 25
  • 199
  • 285
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 3
    Thank-you. This is really a non-issue since I've had little trouble using '0' for all my stuff. I was mostly curious about the "best" way. – Sparky Mar 19 '11 at 01:09
  • `"It drives me nuts that there are two different ways of doing the same simple thing."` - ah, I see what you were saying now. It sounded like you favoured the `0px` style, but I see the truth now :) – thirtydot Mar 19 '11 at 01:48
  • 1
    +1 for quoting the spec, instead of guessing or using empirical behavior. – goodeye Jan 13 '12 at 04:02
2

I always use 0 (without units), unless I want to explicitly set the units, simply because it's shorter. The important thing is to be consistent.

Adam
  • 12,236
  • 9
  • 39
  • 44
1

I think 0 is 0 no matter what you have after it. 0% of something would be the same as 0 pixels of something. I think...at least that is how I think about things, and multiplication seems to agree with me.

wilbbe01
  • 1,931
  • 1
  • 24
  • 38
  • Yes... mathematically it makes perfect sense but that doesn't always translate into best programming practices. Personally, for this I prefer the '0' by itself. – Sparky Mar 19 '11 at 01:14
  • @Sparky672: Yeah, like you say "prefer." My main point there that they're all the same. As far as programming sense goes, that is largely (at least in this case) personal preference. It also depends on the situation (IMO). If someone styled an entire site largely off using pixel values, then using 0 by itself might look out of place, or the same goes if styled with most all %. Anyway, yes, I am in agreement with you. – wilbbe01 Mar 19 '11 at 01:59
1

If you are using several type of CSS units (%, em, inch…) in your stylesheet you'd better keep the intended one (in your case px).

On a side note, remember that the keyword none doesn't necessarily redirect to 0 (even if visually it has the same result).

Knu
  • 14,806
  • 5
  • 56
  • 89