CSS Difference Between 0 and 0Em

CSS difference between 0 and 0em

There's no difference when the value is 0. If it were 1 and 1em, yes, there's a difference, but 0 is 0, no matter the unit.

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

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.

When specifying a 0 value in CSS, should I explicitly mark the units or omit?

I argue you should also omit the units.

From a programmer's perspective, 0 == null == none == false, where 0px == 0px only.

Which means that if you specify a border width of 0 then no border will be there, but if you specify a 0px border, then a border of 0 px will be created (that's the idea behind it, in reality 0px gives the exact same result like 0).

Further Points

• unit-less 0 makes it easier to read as it is easily distinguishable from normal unit'ed values.
• It makes sense to remove the units as they have no point in being there (0 could mean size, color, etc.).

Conclusion: Omit the units in 0. They're not needed and confusing.

Margin/Padding set to 0 - which unit is zero then?

0 px; 0 em; 0 elephants; All the same. All equal to nothing.

CSS minificator removes units for zero values (px, ms, em)

The unit identifier can be omitted only for lengths of zero. Other units require the unit identifier even for values of zero. Lengths include em, px, etc. There is some debate over whether it is better to include it or not (see this question and this one). A minifier will and should remove the unit identifier on lengths of zero. See the spec here:

for zero lengths the unit identifier is optional

Non-lengths require unit identifiers, whether zero or not. If a minifier removes the unit identifier of a non-length, such as the ms in the time given as the value of the property transition-duration, it is a bug in the minifier.

Using 0px instead of 0 in the following context

They both work, so it's pretty much personal preference.

0 is special in that it means 0 of any unit presented but I usually declare the unit of measurement for ease of reading.

http://jsfiddle.net/Kyle_Sevenoaks/UFgpt/

Sass + scout variable with em gives 0em

Depending on the version and type of Sass you are compiling with, it doesn't like decimal values and will ignore everything after the period.

You'll have to write your value like this

$petitPaddingMargin: 10em / 16;

Source: https://github.com/scout-app/scout-app/issues/111

---

Related Topics