CSS设置下划线与文字间距距离(CSS文字下划线距离设置)
使用CSS单词介绍
- padding-bottom——设置内容与对象下边框的距离
- border-bottom——设置对象下边边框
读音
实现过程
这里不是使用text-decoration下划线属性来实现的,而是使用底部边框属性border-bottom实现下划线一样效果,然后利用内底部边距padding-bottom设置下边框与文本的间距
CSS底部边框实现下划线效果
这里还是使用HTML <u>
标签来实现下划线,不过这里使用自己的样式:
- 首先去掉自带的下线样式,
- 然后用下边框实现下划线的效果,
- 使用底部内边距设置下划线与文本的距离
1 2 3 4 5 6 7
| u {
text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid #F00 }
|
完整代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下划线与文字距离改变 在线演示 Thinkcss</title> <style> u { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid #F00 } </style> </head> <body> <u>下划线</u> </body> </html>
|
显示效果:
![]()
下划线样式
参考链接
http://css5.com.cn/jiqiao/914.shtml
预览: