pre标签内嵌套div元素导致代码行上下出现多余空白如何解决

你观察到的多余间距并非来自div的margin或padding，核心原因是<pre>标签的默认特性：pre会保留标签内部所有空白字符（换行、空格、制表符都会被原样渲染）。你当前的HTML结构中，<pre>内部每个<div>的前后都带有换行，这些换行被pre直接识别为内容渲染成空行，才产生了看似是div带来的间距，所以调整div的盒模型属性不会生效。

以下是两种常用的可落地解决方案：

• 方案1：调整HTML结构写法（无需修改CSS）
  直接移除<pre>内部所有<div>前后的换行与多余缩进，让标签紧挨着排列，即可避免pre渲染多余空白，同时完全保留code标签内的代码缩进：

<pre><div class="uncovered"><code>def f(a, b):</code></div><div><code>    return a+b</code></div></pre>

该方案的缺点是HTML源码的可读性会略有下降。

• 方案2：CSS适配（保留原有HTML结构可读性）
  不需要改动现有HTML代码，通过CSS消除pre内空白文本节点的渲染效果即可：

pre {
  font-size: 0; /* 让pre内的空白文本节点（换行、额外空格）不占用渲染空间 */
}
pre > div {
  margin: 0;
  padding: 0;
  font-size: 16px; /* 恢复为你需要的正常字体大小即可 */
}
div.uncovered {
  background-color: red;
}

该方案可以保留你原有HTML的换行写法，同时不会影响code标签内的代码缩进效果。

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