Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 262
Sparky Avatar asked Mar 19 '11 00:03

Sparky


People also ask

What is CSS 0px?

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

Is it okay to use px in CSS?

Conclusion. Ultimately, everything depends on who your users are, what you need to support, and what you want your site to look like, but there is nothing inherently wrong with using pixels in CSS.

What does px represent in CSS?

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

What can I use instead of pixels CSS?

% is also a relative unit, in this case, relative to either the height or width of a parent element. They are a good alternative to px units for things like the total width of a design if your design does not rely on specific pixel sizes to set its size.


1 Answers

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.

like image 196
thirtydot Avatar answered Sep 20 '22 22:09

thirtydot