Why doesn't the browser display a line break caused by the trailing newline character inside the white-space: pre element?

Question

Both of these divs do the same. Why is the leading newline, but not the ending newline (in the second div)? I read the Line Breaking and Word Boundaries section in the CSS3 specification, but it does not explain this behavior.

.pre { white-space: pre; border: 1px solid red; margin-bottom: 10px; } 

 <div class="pre"> hello world</div> <div class="pre"> hello world </div> 

Answer 1

Why? Well, to avoid compatibility issues, apparently.

W3C says:

To avoid problems with SGML line break rules and inconsistencies between existing implementations, authors should not rely on user agents to display blank space immediately after the start tag or immediately before the end tag.

as well as :

Please note that the rules for processing white space have already deleted all tabs and spaces after breaking a segment before these checks [by the value of the space property] take place.

Now it is unclear what inconsistencies will be introduced if browsers were allowed to keep spaces before the end tag, but there you have it.

Answer 2

Because the last \n will not work. And the white-space: pre property works as it is called. This adds a new line before the word. The last \n not recognized as a word.