同样式下<pre>与<samp>换行差异：如何消除<samp>起始换行？

这个问题的根源其实是HTML结构里的空白字符被保留了，再加上<samp>和<pre>元素的原生特性差异：

1. 为什么只有有这个问题？
   <pre>是原生的预格式化块级元素，我们通常会下意识地把内容紧贴标签写（比如你代码里的<pre> &gt; ...），不会在标签和内容之间加换行；而<samp>默认是行内元素，很多人写代码时习惯在标签后换行再写内容，比如：

<samp>
&gt; This block...
</samp>

当你给<samp>设置了white-space: pre后，这个开头的换行符会被完整保留，导致块的开头出现换行；而你的<pre>代码里没有这个换行，所以就没问题。

2. 怎么移除这个换行？
   有两种简单的解决方式：

方法1：修正HTML结构（推荐） #

把<samp>的内容紧贴起始标签写，去掉标签和内容之间的换行或多余空格：

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

这样white-space: pre就不会保留多余的换行，和<pre>的表现完全一致。

方法2：用CSS调整空白处理（如果不想改HTML） #

如果你不想修改HTML结构，可以把white-space的值改成pre-line——它会保留文本中的换行，但会折叠开头/结尾的空白和连续空白：

pre, samp { 
    background-color: #000; 
    color: #fff; 
    padding: 1rem; 
    margin: 1rem 0; 
    white-space: pre-line; /* 替换原来的pre */
    display: block; 
    overflow-y: auto; 
}

不过要注意，pre-line会合并连续的空格，如果你需要严格保留文本里的空格布局，还是推荐方法1。

内容的提问来源于stack exchange，提问作者MindfulMinun