解决CSS下划线离文字太近问题的关键是使用text-underline-offset属性调整垂直偏移，配合text-decoration-thickness控制粗细，并优先选用ex或em单位以适配字体变化，同时通过@supports实现兼容性降级。
CSS下划线离文字太近，主要因为默认的 text-decoration（尤其是 underline）位置和粗细是浏览器预设的，无法直接控制垂直偏移。虽然 text-decoration-thickness 能调粗细，但真正影响“离得近不近”的关键是 text-underline-offset —— 它才是控制下划线与文字基线距离的核心属性。
这是最直接有效的办法。该属性专门用于调整下划线（或上划线、删除线）相对于文字基线的垂直偏移量：
4px、0.2em）会让下划线向下移动，远离文字，视觉上更“松”-1px）会向上靠，甚至可能穿过字形（慎用）px、em、rem、ex（推荐用 em 或 ex，更适配字号变化）示例：
a { text-decoration: underline; text-underline-offset: 0.25em; }这个属性只控制线的粗细，不影响位置，但粗线+小 offset 容易显得“压字”，所以常需和 offset 联动：
立即学习“前端免费学习笔记（深入）”；
offset 来避免粘连（比如 thickness: 2px 时，offset: 0.3em 更舒适）auto（浏览器默认）、from-font（字体自带推荐粗细），或具体数值搭配写法：
h2 { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1.5px; }text-underline-offset 在 Chrome 89+、Firefox 70+、Safari 15.4+ 支持良好，但旧版 Safari（≤15.3）和 IE 完全不支持：
@supports 做渐进增强border-bottom 模拟（但会改变行高、影响对齐，慎用于内联文本）安全写法示例：
a { text-decoration: underline; }不同字体的下降部（descender）深度、基线位置不同，同一 offset 在思源黑体和 Times New Roman 下观感可能差异明显：
ex 单位（1ex ≈ 字体小写字母 x 的高度），比 px 更自适应例如：text-underline-offset: 0.25ex 比 2px 更稳妥。
基本上就这些。调好 text-underline-offset 是关键，厚度只是锦上添花；单位选对、字体实测、兼容兜底，下划线就能既清晰又呼吸感十足。
以上就是css下划线离文字太近怎么办_text-decoration-thickness与offset调节的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
510
收藏
取消收藏
