根本原因是浏览器对标签默认施加不一致的font-size和line-height，需用固定字号+无单位行高+显式基线控制三件套解决；line-height在flex/grid中失效，应改用align-items:center等布局方案。

为什么

标签的行高总显得挤或飘忽</H3>
<p>根本原因不是你没设<code>line-height

，而是浏览器对元素默认施加了不一致的<code>font-size和line-height。Chrome 用smaller，Firefox 用1em，Safari 可能还叠加了vertical-align: baseline——结果就是同一段console.log()在不同环境里上下错位、行距发紧，甚至和周围文字基线不齐。

• 只改font-family不碰尺寸，等于白干：字体换了但字号/行高还是各玩各的
• line-height: normal在

  元素上基本没意义，它会退回到浏览器自定的不可控值</li>
  <li>如果父容器<code>font-size: 0

  （比如为清除 inline 间隙），子级code的无单位line-height会算出 0 —— 必须显式重置font-size

怎么给

标签写可靠的行高</H3>
<p>核心是三件套：固定字号 + 无单位行高 + 显式基线控制。别依赖继承，<code>code

得单独喂饭。

• 用font-size: 0.95em或14px代替smaller，确保和正文字号对齐
• line-height: 1.4是安全起点：足够撑开等宽字体的字怀，又不会让内联

  元素在段落中“顶”得太高</li>
  <li>避免<code>vertical-align: middle

  ：它会强制重排行框，反而引发跳动；靠line-height本身微调更稳
• 如果code嵌在pre里（比如pre code结构），记得单独写规则：pre code { line-height: 1.3; }，否则会被pre的默认white-space行为干扰

第三方库或 Markdown 渲染后

行高失效怎么办</H3>
<p>常见于用 Vue/React + remark/marked 的项目，生成的<code>code

被包在pre里，而 Bootstrap/Tailwind 等库自带更高优先级的code样式，直接覆盖你的规则。

• 先打开 DevTools，选中元素，看「Computed」面板里的<code>line-height来源——如果不是你的 CSS 文件，就说明被覆盖了
• 提高选择器权重：用body code或article code替代单纯code
• 遇到 Tailwind 的prose类？它会给code加font-mono text-sm，得用.prose code覆盖
• 紧急时加!important，但仅限上线前临时救火，别进 Git 历史

表格里或 flex 容器中的

行高为啥不起作用</H3>
<p><code>line-height

只对“参与文本流”的元素生效。一旦code被放进display: flex、display: grid或table-cell里，它就脱离了行框上下文，line-height自动退化为无效属性。

立即学习“前端免费学习笔记（深入）”；

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• flex 容器中想垂直居中code？用align-items: center或margin: auto，别碰line-height
• 表格单元格里放code，且要单行锁高：必须给td设height和line-height（值相等），再清空padding和border干扰
• 如果code里含br或换行符，line-height只管每行内部间距，整体高度还得靠max-height或overflow约束

实际行高是否可靠，不取决于你写了多少行 CSS，而在于你有没有切断所有干扰链：字体栈、字号继承、盒模型、布局上下文、第三方样式权重。漏掉任意一环，line-height就只是个摆设。