使用`white-space：pre`进行额外的新线，但不是

Question

在我的代码中，<pre>和<samp>标签的风格相同。尽管如此，<pre>块不是以换行符开头，而<samp>块也是如此。如何删除换行符？导致换行出现的原因是什么？为什么它出现在一个而不是另一个？

我已经尝试将white-space值更改为pre-line和pre-wrap，两者都无济于事。

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

正如@Xufox所说，他们的文字内容实际上是不同的。这是HTML解析器的结果。在<pre>中the "in body" tree construction state says开始标记的规则：

标签名称为以下之一的开始标记：“pre”，“listing”

如果打开元素的堆栈在按钮范围内具有p元素，则关闭p元素。

为令牌插入HTML元素。

如果下一个标记是U + 000A LINE FEED（LF）字符标记，则忽略该标记并转到下一个标记。 （作为创作方便，忽略pre块开头的换行符。）

将frameset-ok标志设置为“not ok”。

因此，从<pre>元素中删除了一个初始的新行，但是对于<samp>元素没有类似的规则。