使用padding-bottom样式实现字体文字下划线距离设置。
传统的css下划线text-decoration样式只能设置其文字下划线样式而无法实现下划线与文字间距调整。所以借助与padding属性模拟下划线实现文字与下划线之间距离可调节。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>文汇建站</title>
<style>
.divcss5-x5{ padding-bottom:5px text-decoration:underline}
.divcss5-x10{ padding-bottom:10px text-decoration:underline}
</style>
</head>
<body>
<p>
下划线divcss5距离调节实例
<span class="divcss5-x5">我下划线距离为5px</span>,
<span class="divcss5-x10">我的下划线距离为10px</span>
</p>
</body>
</html>
这个超链接都是系统默认的，它是有一定空隙和间距的，你说的问题我也碰到过，是中间有地方代码错了，少代码或者代码不规范，再认真检查一下，问题也就出来了。还有一种解决方法也很快
a:link,a:visited{color#000font-size:12pxtext-decoration:none}
a:hover{border-bottom:1px solid #000color:#ff0000}
如果你感觉还是紧的话，就在a:hover加放padding-bottom:2px这个可以调大小。
有时候UI设计的时候文字下方会有一个下划线，所以我们经常用 text-decoration:underline 来设置一个下划线，但是呢，发现这个下划线和文字特么的重合了，来没法设置，只能用别的方法代替了，啪啪啪的写一大堆css
现在宣布： 春天来了: text-underline-offset
这个css可以设置距离文字的距离，百分比，还有一个注意点就是一定要和 text-decoration:underline 一起使用，否则不起作用，下面看一个例子
html
css
