解决CSS下划线离文字太近问题的关键是使用text-underline-offset属性调整垂直偏移，配合text-decoration-thickness控制粗细，并优先选用ex或em单位以适配字体变化，同时通过@supports实现兼容性降级。
CSS下划线离文字太近，主要因为默认的 text-decoration（尤其是 underline）位置和粗细是浏览器预设的，无法直接控制垂直偏移。虽然 text-decoration-thickness 能调粗细，但真正影响“离得近不近”的关键是 text-underline-offset —— 它才是控制下划线与文字基线距离的核心属性。
用 text-underline-offset 抬高下划线位置
这是最直接有效的办法。该属性专门用于调整下划线（或上划线、删除线）相对于文字基线的垂直偏移量：
- 正值（如
4px、0.2em）会让下划线向下移动，远离文字，视觉上更“松” - 负值（如
-1px）会向上靠，甚至可能穿过字形（慎用） - 支持单位：
px、em、rem、ex（推荐用em或ex，更适配字号变化）
示例：
a { text-decoration: underline; text-underline-offset: 0.25em; }text-decoration-thickness 的作用与配合技巧
这个属性只控制线的粗细，不影响位置，但粗线+小 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; }@supports (text-underline-offset: 0.2em) {
a { text-underline-offset: 0.25em; text-decoration-thickness: 1.2px; }
}
字体本身也会影响视觉距离
不同字体的下降部（descender）深度、基线位置不同，同一 offset 在思源黑体和 Times New Roman 下观感可能差异明显：
- 衬线体（如 Georgia）通常 descender 更长，下划线容易显得更近
- 无衬线体（如 Inter、SF Pro）相对干净，offset 可稍小
- 建议在目标字体下实测，优先用
ex单位（1ex ≈ 字体小写字母 x 的高度），比 px 更自适应
例如：text-underline-offset: 0.25ex 比 2px 更稳妥。
基本上就这些。调好 text-underline-offset 是关键，厚度只是锦上添花；单位选对、字体实测、兼容兜底，下划线就能既清晰又呼吸感十足。
