CSS设置line-height为1消除文字留白技巧

用 line-height: 1 真的能完全消除上下空隙吗

不能一概而论。设 line-height: 1 是必要但不充分条件：

• 对纯英文或数字可能看起来贴边了，但中文、emoji、带重音符号的字符仍可能溢出
• line-height: 1 是按 font-size 计算的，如果字体本身设计有较大字身（em-box），顶部/底部依然有留白
• 某些字体（如 "PingFang SC"、"Segoe UI"）在 macOS/Windows 渲染时会额外加 buffer，仅靠 line-height 压不住

实操建议：line-height: 1 必须配合 font-size 和 vertical-align 控制；更稳妥的做法是加 overflow: hidden 或用 transform: translateY() 微调，但后者影响可访问性。

彻底清除默认间距的最小 CSS 组合

只清 margin 和 padding 不够。真实生效的组合要覆盖三类来源：

• 用户代理样式表：针对 p、h1–h6、pre 等标签重置 margin 和 padding
• 行盒行为：设 line-height: 1 + vertical-align: top（对 inline 元素）或 display: flex; align-items: flex-start（对块级容器）
• 字体度量干扰：加 font-feature-settings: "kern"; 减少字距影响，或用 text-rendering: optimizeLegibility;（非必需，但部分场景有用）

最简可靠写法示例：

div.text-tight {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  /* 防止父容器基线对齐产生的间隙 */
  vertical-align: top;
}

Flex 容器里文字贴顶贴底的坑

用 display: flex + align-items: flex-start 看似一劳永逸，但要注意：

• 如果子元素是 这类 inline 元素，它仍受父级 line-height 影响，必须同时设 line-height: 1
• align-items: stretch（默认值）会让文字区域被拉伸，反而放大空隙
• 遇到 box-sizing: border-box 和 border 时，border 会参与计算，导致视觉偏移，需用 padding 补偿而非依赖对齐

真正贴边的关键不是“对齐方式”，而是让文字所在行盒（inline box）的高度压缩到极限，并切断它和父容器基线的绑定关系。

字体度量是隐性变量，不同系统、不同字体、甚至同一字体的不同字重，都会让 line-height: 1 的实际效果浮动。别指望一套 CSS 通吃所有场景，得在目标设备+字体组合下实测。

今天关于《CSS设置line-height为1消除文字留白技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！