css下划线距离文字间距

许多开发人员在使用CSS下划线样式时，都遇到过距离文字的间距问题。刚开始时，他们想在下划线的底部加上一些 padding 以增加下划线与文字的间距，但会发现 padding 的实际效果并不是很好。那么应该如何解决这个问题呢？

.text {
   text-decoration: underline;
   padding-bottom: 5px;
} 

上述代码会为文本添加下划线并在下方添加 5 像素的 padding。但还需要进一步了解下划线的实际高度。实际上，下划线的高度（即下划线的跨度）是由字体设定的，而不是由行高来控制的。

对于跨度较小的字体，我们需要手动设置下划线的跨度，才能让下划线与文字的间距看起来协调舒适。

.text {
  border-bottom: 1px solid #000;
  line-height: 1.5;
} 

上述代码为文本添加了一个黑色的底部边框，并将行高设置为 1.5。这样可以使下划线与文字之间的间距看起来更加合理。但是，在使用不同字体和字体大小时，这种方法可能需要进行调整。

最后，我们可以结合这两种方法：利用下划线的跨度来调整下划线与文字之间的间距，并使用 padding 来进一步微调该间距。

.text {
  text-decoration: underline;
  border-bottom: 2px solid #000;
  padding-bottom: 3px;
  line-height: 1.5;
} 

上述代码为文本添加了下划线并在其底部加了一个黑色的边框，同时设置了 padding 与行高，以获得理想的下划线间距。