line-height的浏览器默认值差异在于：chrome/safari约1.15–1.2，firefox约1.25，edge旧版略高，因各引擎按字体度量自主计算；用无单位数值（如1.5）可规避此不一致，确保响应式与继承稳定。
line-height 的浏览器默认值差异在哪
不同浏览器对 normal 值的解析不一致：Chrome 和 Safari 通常取约 1.15–1.2，Firefox 可能接近 1.25，Edge（旧版）甚至会略高。这不是 bug，而是规范允许的渲染自由度——line-height: normal 本质是让浏览器按字体度量（font metrics）自动计算，而各引擎对同一字体的 ascender/descender/leading 推算方式不同。
直接后果是：未显式设置 line-height 的文本，在 Chrome 看着紧凑，在 Firefox 里可能多出半行空白，尤其在按钮、导航栏、卡片标题等紧凑区域容易露馅。
用无单位数值替代 normal 是最稳妥解法
把 line-height: normal 换成 line-height: 1.5 这类无单位数值，就能绕过浏览器各自“猜”的环节。它强制以当前元素的 font-size 为基准做乘法，结果确定、可继承、响应式友好。
- 子元素若修改了
font-size（比如h2 { font-size: 1.8rem; }），它的行高自动变成1.8rem × 1.5，无需额外声明 - 避免用
px或em写死，否则缩放字体或切换系统字号时行高会失配 - 小屏段落建议从
1.4起步，大屏长文可上到1.6～1.7，但始终用无单位数
vertical-align 和 inline 元素会悄悄干扰行高表现
哪怕你写了 line-height: 1.5，只要父容器里混入 <img>、<input> 或 vertical-align: baseline 的内联元素，整行的基线对齐逻辑就会拉高实际行盒（line box）高度，导致视觉行距变大——这常被误认为是 “line-height 不生效”。
排查方法很简单：给所有非文本内联元素加 vertical-align: middle 或 vertical-align: top，再看是否回归预期；更彻底的做法是，对需要严格控高的容器（如导航条）启用 display: flex，天然规避 inline 布局的基线纠缠。
min-height 和 line-height 配合时容易忽略的垂直溢出
当容器设了 min-height（比如卡片最小高 120px），又只靠 line-height 控制内部段落间距，一旦文字行数增多（例如响应式下字号变大、换行增加），内容总高度可能超过 min-height，但容器不会自动撑开——除非你没写 height: auto 或忘了清除浮动。
真实踩坑点在于：很多开发者以为 min-height 能“兜底”，却没意识到它只约束最小值，不干预内容自然增长；而 line-height 只管行内垂直居中，不管容器是否截断。所以必须确认容器的 overflow 行为，以及是否启用了 box-sizing: border-box，否则 padding + 多行文本 + 行高叠加后，很容易在移动端出现底部内容被裁切。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
