This em thing was seriously confusing to me. After much searching and testing, this is what I found.
em is essentially the same as font-size, but font size does not have a precise definition.
Font size is defined in most fonts as something just a little larger than the vertical distance from the top of an “H” to the bottom of a “p”.
The default (or “intrinsic”) word spacing is typically 0.25em, or 1/4 of the font-size.
When you specify word-spacing: normal; you are specifying that the spacing will be that default (1/4 of the Hp distance).
When you set word-spacing to a specific length, you are specifying to ADD that much length to the intrinsic spacing.
This is true whether you are specifying a relative length (such as em) or an absolute length (such as px).
But in a relative length, you also have to know what the parent’s font-size is, which also depends on it’s parent, etc.
So. In this example a good text to test with is the paragraph in the blue banner at the top (which conveniently, actually has spaces).
This paragraph is nested like so: html -> body -> div class=“banner” -> p (paragraph). The only parent that has a font-size set is the html element itself, where font-size is set to 16px.
(The font-size properties set for h1, h2, etc. don’t matter because those are not parents for this paragraph.)
So if our font-size is 16px and the default word-spacing is 0.25 of this, the spacing should be 4px when word-spacing is normal.
I started with no word-spacing property set at all in the code block for the selector: .banner p
I set word-spacing: normal; to see if this paragraph changed at all. It seemed to stay the same, so the spacing here does seem to be default.
I set word-spacing to 4px, and the paragraph’s spaces clearly got larger. It was difficult to tell by how much, but the words were clearly farther apart.
Test 3: If my theory is correct, then 1em (= font-size) is 16px and so 0.25em is 4px.
I changed the word-spacing to 0.25em and the paragraph’s spacing did not appear to change.
This seems like confirmation that 0.25em == 4px.
For a final check, I tried a negative em value and a negative px value. (If the default spacing is 0.25em, and setting a length ADDs the length to that, then setting word-spacing to -0.25em should exactly get rid of the spacing.)
I set word-spacing to -0.25em, and sure enough, the paragraph in the blue banner now looks like a single un-spaced string of text. No spaces, and the words also don’t overlap.
I then set word-spacing to -4px, and this looked the same; no spaces and also no overlap.
So for this paragraph, font-size is 16px, word-spacing is 4px by default.
If I set a length in em or in px, CSS ADDs that much to the default spacing of 4px.
If I set the word-spacing to -4px or -0.25em, that exactly gets rid of the spaces.