When does whitespace matter in HTML?

Question

example 1

<div><button>one</button><button>two</button></div>  <div>     <button>one</button>     <button>two</button> </div> ​ 

In the first div there is no space between the two buttons, in the second, there is.

Now let's consider another example:

example 2

<div>a</div> <div> b</div>​​​​​​​​​​​​ 

There is no space before that b.

example 3

a<b> bold</b> man 

Now the whitespace before bold is significant

example 4

a <b> bold</b> man 

Now only one of the spaces (after the "a" or before "bold") is significant.

question

What are the exact rules behind when whitespace is stripped or collapsed?

Answer 1

The reality is somewhat complicated. There are two parts

1. What the parsing does.
2. What the rendering does.

The parsing actually removes very little white space whilst parsing text (as opposed to markup). It will remove an initial line feed character at the start of <textarea> and <pre> elements and also on the invalid <listing> element, but that's about it.

Jukka refers to the HTML 4.01 section B.3.1 Line breaks saying that "a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag" but that is in a non-normative appendix and browsers do not follow it except for the three elements mentioned above.

That can be demonstrated using Jukka's example here on line breaks with no spaces . Note the #text: nodes around the button elmeents in the tree display, and that if the line breaks are removed, the '#text:` nodes no longer appear.

We can also see that the rule is not applied by using that first example from the specification here. By adding display:pre it's clear that the line breaks are not exactly ignored but that the rendering the two examples the same is merely a property of the default white-space handling being white-space:normal

Which brings us to the relevant spec, which is 16.6.1 The 'white-space' processing model in the CSS spec. This covers the systematic rules to be applied to the text characters for each of the white-space setting values.