Size of zero pixels in CSS with or without 'px' suffix?

Sparky picture Sparky · Mar 19, 2011 · Viewed 7.6k times · Source

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.

Answer

thirtydot picture thirtydot · Mar 19, 2011

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.