CSS下划线与文字间距距离设置

CSS下划线与文字间距距离设置(CSS文字下划线距离设置)文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里css5为大家介绍通过下边框border-bottom样式实现这一需求样式效

CSS设置下划线与文字间距距离(CSS文字下划线距离设置)

css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里HTML8为大家介绍通过下边框border-bottom样式实现这一需求样式效果。

要实现文字与下划线间距可大可小效果并不是使用text-decoration下划线样式实现,而是使用padding-bottom和border-bottom实现下划线与文字间距改变,实现我们想要的文字与下划线距离设置效果。

一、使用CSS单词介绍

padding-bottom——设置内容与对象下边框的距离
border-bottom——设置对象下边边框

利用border-bottom下边框属性实现下划线一样效果。

二、下边框实现文字与下划线效果实例

1、CSS代码

  1. .exp-a{ padding-bottom:2px; border-bottom:2px solid #F00} 
  2. .exp-b{ padding-bottom:8px; border-bottom:1px dashed #00F} 

设置两个class,分别设置不同边框颜色、边框宽度、边框样式(实线与虚线样式),同时分别设置padding-bottom不同值。
2、HTML代码内容

  1. 测试文字,<span class="exp-a">HTML8</span>网站欢迎您!<br /><br /> 
  2. 测试文字,<span class="exp-b">HTML8</span>网站欢迎您! 

3、完整实例DIV+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>下划线与文字距离改变 在线演示 Thinkcss</title> 
  6. <style> 
  7. .exp-a{ padding-bottom:2px; border-bottom:2px solid #F00} 
  8. .exp-b{ padding-bottom:8px; border-bottom:1px dashed #00F} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. 测试文字,<span class="exp-a">HTML8</span>网站欢迎您!<br /><br /> 
  13. 测试文字,<span class="exp-b">HTML8</span>网站欢迎您! 
  14. </body> 
  15. </html> 

4、效果截图

CSS下划线实线与虚线与文字距离实例效果截图
CSS下划线实线与虚线与文字距离实例效果截图

5、在线演示与打包下载

下划线与字体距离设置在线演示:

查看案例

css文字下划线与文字距离设置打包下载:

三、CSS下边框实现下划线距离小结

这里实现文字与下划线距离样式,并不是使用text-decoration下划线样式实现,而是通过border-bottom下边框样式,距离实现使用padding-bottom实现文字与下边框(模拟下划线)之间距离的调节。

扩展了解:
css边框css border
css下划线颜色
css虚线下划线
html下划线 u标签

更新