标签每行多余空行的问题 #

这种情况我之前也碰到过，大概率是两个原因导致的：要么是<pre>内部的文本本身带有多余换行，要么是CSS样式影响了行间距。给你几个具体的解决方法：

1. 检查并清理

内的原始文本 #

<pre>标签会严格保留你写的所有换行和空格，如果你的原始代码里每行结束后不小心敲了两次回车（也就是每行之间有两个换行符），那渲染出来自然会有多余空行。

把你的代码改成紧凑的格式，确保每行之间只有一个换行：

<pre>User | Account | Active
----------------------------------------------------------------
Tim | 1234 | yes
Bob | 0346 | yes
Adams | 1765 | no
Gig | 0045 | yes</pre>

2. 通过CSS调整行间距和默认样式 #

浏览器对<pre>有默认样式，比如可能自带较大的line-height或者上下边距，看起来像是每行之间有空行。你可以给<pre>添加自定义CSS来修正：

pre {
  /* 强制保留原始换行（这是<pre>的默认值，但可能被全局样式覆盖） */
  white-space: pre;
  /* 调整行高，缩小行与行之间的距离 */
  line-height: 1.2;
  /* 去掉默认的上下边距，避免额外留白 */
  margin: 0;
  /* 可选：如果需要的话去掉内边距 */
  padding: 0;
}

3. 排查全局样式的影响 #

如果上面的方法没用，检查一下你的全局CSS有没有给所有元素（比如用*选择器）设置了margin、padding或者line-height，这些可能会继承到<pre>上，导致多余的空行。可以用浏览器的开发者工具（F12）查看<pre>的样式，看看哪些属性被继承或覆盖了。

内容的提问来源于stack exchange，提问作者Mr.HTML