css下划线距离怎么调？

在网页设计中，下划线常常被用来突出文字或链接的重要性。在CSS中，我们可以使用text-decoration属性来对下划线进行样式设置。但是，有时候我们会遇到下划线距离文字或链接过近或过远的问题，这时候我们可以通过修改text-decoration中的属性值来解决这个问题。
首先，让我们来看一下text-decoration的属性值：
- none：不添加任何线条 - underline：添加下划线 - overline：添加上划线 - line-through：添加中划线 - blink：添加闪烁线（已经被废除，不再支持）
以上属性值可以通过在CSS中设置text-decoration来对文字或链接进行下划线样式的设置。例如：
pre { text-decoration: underline; }
通过上述代码，我们可以设置pre元素下所有文字或链接都显示下划线。当然，在实际应用中，我们需要自定义下划线的距离以满足需求。这时候我们就需要使用text-decoration的一些附加属性。
在text-decoration中，我们可以使用以下属性值来调整下划线距离：
- text-decoration-line：决定添加何种类型的线路，如下划线、上划线等； - text-decoration-color：设置线条的颜色； - text-decoration-style：设置线条的样式，如点状、虚线等； - text-decoration-thickness：设置线条的粗细程度； - text-decoration-skip-ink：设置避免覆盖字母的策略。
通过使用上述属性值，我们可以自定义下划线的样式。例如，如果我们需要让下划线距离文本稍有距离，可以这样设置：
pre { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 2px; }
通过上述代码，我们将下划线的厚度设置为2px，颜色为红色，样式为实线，并将下划线与文本之间的距离设置为2px。这样，下划线就不会紧贴着文本，而是稍有距离。
总结起来，要调整下划线距离，我们需要使用text-decoration的附加属性，包括text-decoration-line、text-decoration-color、text-decoration-style、text-decoration-thickness以及text-underline-offset。通过这些属性的设置，我们可以自由地调整下划线的样式，满足各种不同的需求。