code行高偏小因浏览器对normal值实现差异及inline特性导致，应直接在code上设无单位line-height（如1.5），并注意font-size:0、vertical-align等干扰因素。
code 标签默认行高偏小，尤其在内联使用时容易和周围文字挤在一起，甚至出现文字重叠。直接加 line-height 就能解决，但必须注意它只对“形成行框”的上下文生效，且受父级 font-size: 0、vertical-align 和盒模型干扰最频繁。
为什么 code 的行高看起来特别矮？
浏览器对 code 的默认样式通常为 font-family: monospace; font-size: 1em;，但未显式设 line-height，于是回退到 normal——而各浏览器对 normal 的实现差异大（Chrome ~1.15，Firefox ~1.2），导致行距紧、可读性差。更麻烦的是，code 常作为 inline 元素嵌在段落中，一旦父元素设了 vertical-align: baseline（默认值）或 font-size: 0，它的行框高度会进一步被压缩或错位。
code 标签该在哪设 line-height？
必须写在 code 自身上，不能只靠父元素继承——因为 line-height 在 inline 元素上只影响其生成的“行内框”，不控制整行布局。常见错误是只给 p 设 line-height，结果 code 里的等宽字体仍被压扁。
- 推荐用无单位数值：
code { line-height: 1.4; }—— 随字号缩放，适配响应式 - 若需严格对齐（如文档中代码块与文字基线一致），可搭配
vertical-align: middle或text-top微调 - 避免设
px值（如line-height: 20px），否则当用户放大字体或切换系统字号时，code行高会卡死不变，反而加剧拥挤
内联 code 和块级 pre > code 要分开处理
code 在不同上下文渲染逻辑不同：单独写的 <code>console.log() 是 inline；而 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 中的 code 默认被 pre 的 white-space: pre 包裹，此时 line-height 生效但受 pre 的 font-size 和 padding 影响更大。
- 对纯内联
code：优先设code { line-height: 1.5; vertical-align: text-bottom; }，避免基线对齐导致底部留空 - 对
pre > code：应同时控制pre的line-height和padding，例如pre { line-height: 1.6; padding: 1rem; }，再让code继承即可 - 若
pre内文本换行后撑高，line-height无效——此时要加overflow-x: auto和word-break: break-all防溢出
真正容易被忽略的点是：很多项目全局重置了 body { font-size: 0; } 来清除 inline 元素间隙，这会让所有子元素的无单位 line-height 计算结果为 0，code 直接塌陷。遇到这种情况，必须给 code 显式声明 font-size，哪怕只是 font-size: 1rem;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
