16

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.

Jakub Arnold
  • 85,596
  • 89
  • 230
  • 327
  • 25
    Your teacher is wrong. – Ian G Jun 01 '09 at 14:40
  • 4
    Reminds me of High School physics. If you didn't put the units, the problem was wrong. – Robert Deml Jun 01 '09 at 15:14
  • 6
    In physics (and in HS level you have to be very picky), getting the units right is much more important than getting the right numeric value. For example, if you need the acceleration of gravity on the surface of the Earth and you apply the often-used 10 m/s^2 approximation, you're just "a bit off" (the accepted value is 9.81 m/s^2). If you use 9.82 m/s, then -- to paraphrase W. Pauli -- you're not even wrong. In engineering, the units and correct order of magnitude are EVERYTHING. – Euro Micelli Jun 01 '09 at 15:33
  • 2
    Tell your teacher to follow this link and speak up for himself! http://stackoverflow.com/questions/935107/css-difference-between-0-and-0em – Nosredna Jun 02 '09 at 00:22
  • 1
    Hey guys - his teacher has a valid point there: It saves time. It may only save 500ms of his time to type "em" when he's editing, but if we'd all jump in and standardize this practice, the time could add up to be significant! [PS: What if the site design later calls for a change to 'px' or something else? How much time are we saving then, Mr. Teacher?] – anonymous coward Jun 02 '09 at 18:06
  • Having seen the edit, I'm afraid we're back to "idiot". At least we know now. Please keep us up to date on your teacher's hilarious opinions from now on. – AmbroseChapel Jun 02 '09 at 20:54
  • 1
    It's the same, em stands for emphasize, and if the value is 0 it's 0. – homework Sep 07 '09 at 18:16

13 Answers13

37

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.

Chris Doggett
  • 19,959
  • 4
  • 61
  • 86
  • 1
    and no difference with 0 "whatever". Every units in CSS are defined so that 0 is nothing: 0%, 0cm, 0in, 0pt, etc. – Vincent Robert Jun 01 '09 at 14:41
  • 30
    This is true for apples and elephants too. – Ian G Jun 01 '09 at 14:41
  • 1
    So if you have a value of zero you should always omit the units because they are redundant. – Matthew James Taylor Jun 02 '09 at 05:46
  • 1
    @Matthew: In CSS, yes, unless size is no concern and you really want to be specific. It's really a matter of preference. Anywhere but CSS, like Euro said in the comments to the original question, you can get into trouble if you omit the units. – Chris Doggett Jun 02 '09 at 11:46
14

The file is bigger with 0em.

The way to prove to your professor that there is no difference is to set something to 0 and something else to 0em and inspect the DOM with Firebug or a similar tool. If I recall correctly, you'll see that both are now 0. So the only difference is in the source. (But it's been a while since I checked. I might be thinking of getting and setting styles from jQuery. So check it out before you take my word.)

Nosredna
  • 83,000
  • 15
  • 95
  • 122
10

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.

Peter
  • 13,733
  • 11
  • 75
  • 122
8

It's like saying that 0 bananas is not the same as 0 apples. So in a way, he's correct, but zero is zero, so either way you'll end up hungry!

PatrikAkerstrand
  • 45,315
  • 11
  • 79
  • 94
  • Well, to be picky -- normally, 0 bananas IS NOT the same as 0 apples (oh, for example: var a = new List() is not the same as var b = new List() ). But in this case they are the same because we're not really counting apples or bananas, nor em's or px's; we're counting DISTANCE in UNITS of em's or px's. It's like if the question was "what's the capacity of a crate in banana units or apple units. Then, '0' really is the same as '0 bananas' and '0 apples'. – Euro Micelli Jun 01 '09 at 16:01
5

I wonder if the teacher is trying to highlight, not so much that 0 and 0em are not the same value but perhaps, that the default unit in CSS may not be em (I believe the spec demands that non-zero values have units attached but often assume px).

On the specific example obviously they are equal.

Lazarus
  • 41,906
  • 4
  • 43
  • 54
3

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!

3

Zero is zero is zero. Regardless of whether the units are different. The derived value in pixels is always same: zero.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
3

Your teacher, it appears, is an idiot.

But maybe appearances are deceptive: you should ask your teacher what they meant.

I have to ask, why didn't you ask your teacher what they meant when they first said it? Zero is zero, no matter what the units.

AmbroseChapel
  • 11,957
  • 7
  • 46
  • 68
1

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.

user127802
  • 11
  • 1
1

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.

JavaArchitect
  • 79
  • 4
0

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 .

kcpr
  • 1,055
  • 1
  • 12
  • 28
  • Could someone explain the downvote? If it was connected with me not being specific enough, I just modified the answer specifying that it behaves like that for, at least, the `line-height` property. – kcpr Dec 20 '18 at 16:29
0

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

Adrian Toman
  • 11,316
  • 5
  • 48
  • 62
Rony
  • 9,331
  • 2
  • 22
  • 22
-1

Google's own Chrome browser in the 'Computed' style includes units with zero values which aligns with my personal preference to just include it.

Include Units With Zero Values

Daniel Sokolowski
  • 11,982
  • 4
  • 69
  • 55