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

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

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

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

为令牌插入HTML元素。

如果下一个标记是U + 000A LINE FEED（LF）字符标记，那么   忽略该标记并转到下一个标记。（开头的新行   为了方便起见，将忽略pre块。）

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

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

<samp>上的额外换行符为`white-space：pre`，但不在<pre>

1 个答案: