CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 485

When do browsers render spaces in inline elements?

span {
    font-size: 300%;
    border: 1px solid red;
}
<div>
    <span>   aa   </span><span>bb</span><span>   cc   </span><span>   dd   </span><span>   ee   </span>
</div>

In the above snippet, spaces are displayed only after "aa" and "dd", and around "cc". Why aren't any spaces displayed before "aa" and "dd" or around "ee"? Is this documented in any specification?

Upvotes: 1

Views: 210

Answers (1)

BoltClock
BoltClock

Reputation: 723719

This is covered in section 16.6.1 of the CSS2 spec. There's a lot of words there, but the important bit is here:

any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

This means that whitespace collapsing does not take opening or closing tags into account:

  1. In <span> cc </span><span> dd </span>, the space before "dd" is removed (collapsed), leaving just the space after "cc".
  2. In <span> dd </span><span> ee </span>, the space before "ee" is removed, leaving just the space after "dd".

Since there are no spaces in the element containing "bb", the spaces after "aa" and before "cc" are unaffected.

The following steps apply to the start and end of the line:

As each line is laid out,

  1. If a space (U+0020) at the beginning of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is removed.

This is why the space before "aa" is removed.

  1. If a space (U+0020) at the end of a line has 'white-space' set to 'normal', 'nowrap', or 'pre-line', it is also removed.

This is why the space after "ee" is removed.

Upvotes: 1

Related Questions