css下划线与字体距离

在网页设计中，下划线是一种常用的文本装饰方式之一。通过CSS，我们可以轻松地给文字添加下划线，并调整下划线与文字之间的距离。
在CSS中，我们可以使用“text-decoration”属性来添加下划线。下面是一个例子：
pre { text-decoration: underline; }
以上代码会为“pre”标签中的所有文本添加下划线。但是，有时候下划线可能会和文本贴得太近，影响阅读体验。此时，我们可以使用“text-underline-position”属性来调整下划线与字体之间的距离。该属性有两个值可选：“auto”（默认值）和“left”。当使用“left”值时，下划线会与文字底部对齐。下面是一个例子：
pre { text-decoration: underline; text-underline-position: left; }
此时，下划线会与字体底部对齐，从而增加了可读性。
当然，如果你希望进一步调整下划线与字体之间的距离，你也可以使用“padding-bottom”属性。例如，下面的代码会在下划线和字体之间添加3个像素的空白间距：
pre { text-decoration: underline; text-underline-position: left; padding-bottom: 3px; }
综上所述，通过使用“text-decoration”、“text-underline-position”和“padding-bottom”属性，我们可以自由地调整下划线与字体之间的距离，以达到最佳的阅读效果。