White Space Control With Spans-CodePudding

whitespace at the start and end of elements and outside elements is ignored

However, why does the second paragraph render differently (space between words is colored in cyan)? Why isn't the space colored in yellow in the third paragraph?

p {
  font-size: 2rem;
}
p span:nth-child(1) {
  background: cyan;
}
p span:nth-child(2) {
  background: yellow;
}

<p>
  <span>Hello,</span>
  <span>world!</span>
</p>
<p>
  <span> Hello, </span>
  <span>world!</span>
</p>
<p>
  <span>Hello,</span>
  <span> world! </span>
</p>

CodePudding user response：

The quote you mentioned,

whitespace at the start and end of elements and outside elements is ignored

Is a general rule, applied to mostly block elements. There is some added nuance with inline elements, like your  elements. The browser will by default, collapse adjacent spaces in inline display contexts and use the first space encountered, even when they are contained in other inline elements. As step 4 of the explanation on the same page you linked states:

any space immediately following another space (even across two separate inline elements) is ignored

Here we can follow the algorithm as outlined on the page to compare:

<p>⏎
••<span>•Hello,•</span>⏎
••<span>world!</span>⏎
</p>

First, all spaces and tabs immediately before and after a line break are ignored so
```
⏎
•Hello,•⏎
world!⏎

```
Next, all tab characters are handled as space characters

Irrelevant for us here.

Next, line breaks are converted to spaces

<p>•<span>•Hello,•</span>•<span>world!</span>•</p>

After that, any space immediately following another space (even across two separate inline elements) is ignored
```
•Hello,•world!•
```
Notice how the leading space in the first  has been collapsed, and the ending space has been kept, since it is the first space in the sequence of spaces, even across separate inline elements.
And finally, sequences of spaces at the beginning and end of an element are removed
```
Hello,•world!
```

<p>⏎
••<span>Hello,</span>⏎
••<span>•world!•</span>⏎
</p>

First, all spaces and tabs immediately before and after a line break are ignored so
```
⏎
Hello,⏎
•world!•⏎

```
Next, all tab characters are handled as space characters

Irrelevant for us here.

Next, line breaks are converted to spaces

<p>•<span>Hello,</span>•<span>•world!•</span>•</p>

After that, any space immediately following another space (even across two separate inline elements) is ignored
```
•Hello,•world!•
```
Notice how the leading space in the second  has been collapsed since the first space in the sequence is from outside of it, in the  element.
And finally, sequences of spaces at the beginning and end of an element are removed
```
Hello,•world!
```