CSS设置下划线与文字间距距离(CSS文字下划线距离设置)
css下划线与文字上下距离设置，文字字体下划线样式技巧篇，如何改变文字与下划线距离间距？这里CSS5为大家介绍通过下边框border-bottom样式实现这一需求样式效果。
要实现文字与下划线间距可大可小效果并不是使用text-decoration下划线样式实现，而是使用padding-bottom和border-bottom实现下划线与文字间距改变，实现我们想要的文字与下划线距离设置效果。
一、使用CSS单词介绍
padding-bottom——设置内容与对象下边框的距离
border-bottom——设置对象下边边框
利用border-bottom下边框属性实现下划线一样效果。
二、下边框实现文字与下划线效果实例
1、CSS代码
.exp-a{padding-bottom:2px;border-bottom:2pxsolid#F00}
.exp-b{padding-bottom:8px;border-bottom:1pxdashed#00F}
设置两个class，分别设置不同边框颜色、边框宽度、边框样式(实线与虚线样式)，同时分别设置padding-bottom不同值。
2、HTML代码内容
测试文字，CSS5网站欢迎您！
测试文字，CSS5网站欢迎您！
3、完整实例DIV+CSS代码
html>
下划线与文字距离改变在线演示Thinkcss
.exp-a{padding-bottom:2px;border-bottom:2pxsolid#F00}
.exp-b{padding-bottom:8px;border-bottom:1pxdashed#00F}
测试文字，CSS5网站欢迎您！
测试文字，CSS5网站欢迎您！
4、效果截图
CSS下划线实线与虚线与文字距离实例效果截图
5、在线演示与打包下载
下划线与字体距离设置在线演示：
css文字下划线与文字距离设置打包下载：
三、CSS下边框实现下划线距离小结
这里实现文字与下划线距离样式，并不是使用text-decoration下划线样式实现，而是通过border-bottom下边框样式，距离实现使用padding-bottom实现文字与下边框(模拟下划线)之间距离的调节。
作者：div css
