Difference between space and comma -- CSS property values(not in selector)

Question

What's the difference of space and comma in CSS property value(not for selector)?

font:bold 60px helvetical, arial, sans-serif;

I just had a test, it has different effect when change comma to space or vice versa in above style, so I want to know when to use space/comma?

Spaces separate the components of the property, comman separates the values of one property. Your example can be written as: `font-weight: bold; font-size: 60px; font-family: helvetical, arial, sans-serif;`. Check this answer for more details: [When a CSS property can have multiple values, are those values always separated by whitespaces?](http://stackoverflow.com/questions/22392420) — t.niese, Oct 27 '16 at 08:41
Possible duplicate of [What do commas and spaces in multiple classes mean in CSS?](http://stackoverflow.com/questions/3344284/what-do-commas-and-spaces-in-multiple-classes-mean-in-css) — roberrrt-s, Oct 27 '16 at 08:43
That depends on the specific syntax of the specific property. There's no *general* answer. — deceze, Oct 27 '16 at 08:43
@Roberrrt it is not about commas in the selector, but about commas in the value of a css property. So you linked question is not a duplicate. — t.niese, Oct 27 '16 at 08:44
Does this answer your question? [When a CSS property can have multiple values, are those values always separated by whitespaces?](https://stackoverflow.com/questions/22392420/when-a-css-property-can-have-multiple-values-are-those-values-always-separated) — Kal, Oct 19 '22 at 01:21

Jozefini · Accepted Answer · 2016-10-27T14:17:11.413

Space:

Each value make different function. For example:

font: bold 60px helvetica, arial, sans-serif;

bold = font-weight: bold;

60px = font-size: 60px;

bold do the weight and 60px do the size, these two are different from each other.

Comma:

helvetica, arial, sans-serif = font-family: helvetica, arial, sans-serif;

Values in comma do the same function. They all change font-family. In this case:

If helvetica it's not supported then loads arial, if arial it's not supported then loads sans-serif.

Using fonts with two words:

If you use fonts that contains two words and have spaces like Roboto Slab.

For these fonts you have to put them on double quotes "roboto slab".

Example: font: bold 60px "roboto slab", arial, sans-serif;

1 Answers1