None VS Zero -- What's the big deal!

HTML-CSS
1

What the difference between setting margin or (anything property really) to “zero” instead of “none?” To me they mean the same in human language.

I am asking this question because of what the challenge asked me to do. Here is the challenge’s direction:

Remove the margin from your body element, set the font-family to sans-serif , and give it a background-color of #f5f6f7 as the value.

This is what I coded:

body{margin: none; (instead of "zero")
font-family: sans-serif;
background-color: #f5f6f7;}

Then, I got an error/fail message saying that my margin should have a “zero” value.

Would someone with experience in this domain please provide a logical explanation?

Thank you.

2

Hi @mimiciku

As far as I know, the none keyword is not a value of the margin CSS property. The value of the margin CSS property can either be auto keyword, length or percentage value, or one of the global values (inherit, initial, revert, e.t.c.). Something like:

margin: auto;
margin: 0;  /* No need for unit if the value is 0 */
margin: 2px;
margin: -2px;
margin: 2%;

For more, take a look at the MDN docs.

3

Hi,

how are you?

Thank you for your explanation. However, I have coded in CSS before and required to give “value” to properties that were “none”. So are you telling me that each property in CSS (whatever/whichever it may be) already has a pre-determined “value” that it will accept or work with? If that’s the case, it will make total sense that the putting “none” as a value for “margin” will not work. Am I correct in my reasoning here?

Thank you.

4

Yes. Your reasoning is correct. Each CSS property has values it accepts. Like I mentioned above, none is not a value of the margin property. You can always look up all the values accepted by a CSS property in the documentation.

5

If it helps from a logical standpoint, margin is a size, just like padding, width, height, etc… so you need to specify a number, or specify a sizing instruction (like auto). You can’t have a margin that is ‘none’ wide.

‘none’ works in settings where you aren’t specifying a size, but rather specifying a feature, like background color. You might argue that you can specify ‘none’ for border instead of say ‘2px’, but border is not a size value, but rather object, as you can use ‘border:’ to specify type, color, etc. You can’t put ‘none’ in ‘border-width’… although that one does have an option to specify ‘unset’.

As nibble said, if unsure, reference the documents, it will tell you all the settings that work for a particular property, just thought I’d throw in the logic as I understand it.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.