CSS difference between 0 and 0em

Question

Is there any difference between

margin: 0;

and

margin: 0em;

I didn't notice anything, but my teacher keeps telling me that it's not the same.

Answer 1

There certainly is a difference between a '0' with or without an associated sizing unit (em, px, etc.).

While CSS, in most cases, interprets '0' without a unit size as a default zero-unit for that attribute, it is not always the case (font-size, for example) and some validators will object to properties which require unit sizes in their specification when they encounter a parameter without that unit included.

The difference is that '0', without a unit designation may be interpreted as an expression error in properties where unit size is required. You may not notice the difference since the expression will simply be regarded as 'bad syntax' and the interpreter will skip it; as it normally does with any bad syntax in CSS. So if you specified the '0' as a unit size and the default is '0em' or '0%' etc. then the result will remain '0' for that attribute. However, you will notice it if you intended to change a prior value in the cascade. a '0em' says, 'change the prior value to '0em', but a zero may simply say, 'disregard this rule' and leave the prior rule in effect. This may not be at all what you intended with your naked '0'.

This is a client-side process and you have no control how a particular browser, now or in the future, may handle '0' and default interpreting.

So, besides telling whomever reads your code that you definitely intended to have a '0' sized element, and what type of unit is appropriate, it may actually effect the result. Better to always use the unit designation with your zeros. If you're really fussy (as I am) or design vls systems and code (as I have), you may also wish to put a leading zero (0.xx...) in any values less than 0. This permits later readers to know that your fraction was deliberate and not simply a typo.

As for those who complain about 'extra typing' - I suggest you go take a typing class. One of the first things I do when interviewing designers or coders for a job is give them a typing test. There's nothing like a good typist to save money and produce fewer errors!

Answer 2

your teacher is being stubborn in that he or she is unwilling to admit to being wrong. 'whatever: 0' sets all possible units, inherited or otherwise, to zero. 0 is most definitely zero.

Answer 3

There IS a difference between 0 and 0em!

It's connected with transition property, but I believe it depends on what is the changing property. For margin for example there should be no difference I think, but at least in case of line-height, when value is changed from some other value to 0 the animation will not be played, but when it changes to 0em it will work correctly.

It may be a bug, but I experienced the same behavior in both Firefox and Chromium.

Check it out yourself: https://codepen.io/anon/pen/GPoopW?editors=1100 .

Answer 4

The CSS3 spec says this:

for zero lengths the unit identifier is optional

So, even though Googles guidelines, WordPress guidelines, Microsoft WebMatrix, and possibly many others say you should omit the unit when using zero, it's actually allowed. So it's personal preference or something to put in your own coding guidelines.

Answer 5

0 and 0em are the same, but any value other than 0 for x and xem are not the same.

Answer 6

This has been beaten to death but here goes... let's see what the "big dogs" say on it.

Google CSS Guidelines...

Do not use units after 0 values unless they are required

WordPress CSS Style Guide says similarly...

0 values should not have units unless necessary, such as with transition-duration.