css下划线不贴近文字

最近在学习CSS样式时，遇到了一个问题，就是在制作下划线效果时，发现下划线与文字之间有一定距离，这影响到了最终的页面效果。让我们来看看这个问题的具体表现和解决方法。

/*CSS代码*/
.underline {
    text-decoration: underline;
    border-bottom-width: 0px;
    padding-bottom: 3px;
}

我们一般使用text-decoration属性来为文字添加下划线，但是这个属性会同时给下划线添加一些样式，如下例代码：

/*CSS代码*/
.text {
    text-decoration: underline;
}

这是一段使用text-decoration下划线样式的文字。

从上面的效果可以看到，使用text-decoration样式，下划线与文字之间存在一定的距离，这是CSS设置下划线的默认行为。但是，我们可以通过去除底部边框和加入padding来消除这个问题，如下代码：

这是一段使用自定义下划线样式的文字。

通过上述CSS代码，我们可以将下划线与文字粘合在一起，同时设置下划线的宽度为0，看起来就像是在底部加入了一个线条。

总结来看，通过去除边框和添加padding可以解决下划线与文字之间的距离问题。但在实际应用中，我们还需要根据具体的需求进行调整，以达到更好的页面效果。