额外的换行符<samp>与`white-space：pre`一起使用，但不对</samp> <pre>

Question

In my code, the <pre> and <samp> tags are styled identically. Nevertheless, the <pre> block doesn't start with a newline while the <samp> block does. How can I remove the newline? What's causing the newline to appear? Why does it appear on one but not the other?

I've tried changing the white-space value to pre-line and pre-wrap , both to no avail.

 pre, samp { background-color: #000; color: #fff; padding: 1rem; margin: 1rem 0; white-space: pre; display: block; overflow-y: auto; } 

 <pre> &gt; This block doesn't start with a newline. </pre> <samp> &gt; This block <em><u>does</u></em> start with a newline, despite having the same styles as the pre block. </samp> 

Here it is in a JSFiddle .

Answer 1

As @Xufox says, their text content is actually different. This is a consequence of the HTML parser. The rule for a <pre> start tag when in the "in body" tree construction state says :

A start tag whose tag name is one of: "pre", "listing"

If the stack of open elements has ap element in button scope, then close ap element.

Insert an HTML element for the token.

If the next token is a U+000A LINE FEED (LF) character token, then ignore that token and move on to the next one. (Newlines at the start of pre blocks are ignored as an authoring convenience.)

Set the frameset-ok flag to "not ok".

So an initial new line is dropped from a <pre> element, but there is no similar rule for a <samp> element.