css下划线距离文字的边距

在网页设计中，下划线经常用来突出文字，增强阅读体验。但有时我们可能需要控制下划线的距离，以使它恰好位于文字下方。

text-decoration: underline;
text-underline-position: under; 

上述代码可以给文字添加下划线，并将下划线放置在文字下面。但默认情况下，下划线可能会与文字有些靠近，不够美观。这时，我们就需要通过 CSS 属性来控制下划线与文字之间的距离。

text-underline-offset: 0.2em; 

上述代码表示让下划线距离文字底部的距离为 0.2em。我们也可以尝试使用负值，将下划线放置到文本下方，以实现特殊的设计效果。

text-underline-offset: -0.1em; 

需要注意的是，text-underline-position 属性和 text-underline-offset 属性不能在同一个元素中同时使用。

总之，通过使用 text-underline-position 和 text-underline-offset 属性，我们可以轻松控制下划线的位置和距离，以实现更加个性化的文字装饰效果。