您的位置:首页 > div css问集 > 【 返回上一页

div css如何设置文字字体与下划线距离间距?

如何通过CSS对文字下划线设置距离呢?比如让下划线与文字上下间距再间隔开点。

一、实现所需CSS样式:

使用padding-bottomborder-bottom两个样式实现字体文字下划线距离设置。

传统的css下划线text-decoration样式只能设置其文字下划线样式而无法实现下划线与文字间距调整。所以借助与paddingborder两个属性模拟下划线实现文字与下划线之间距离可调节。

二、可调节的文字下划线距离实例

我们对两段文字进行设置不同距离的下划线,观察其实现CSS样式代码。

1、完整HTML源代码(包括HTML代码与CSS代码):

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>可调节下划线距离实例 在线演示 www.thinkcss.com</title> 
  6. <style> 
  7. .thinkcss-x5{ padding-bottom:5px; border-bottom:1px solid #000} 
  8. .thinkcss-x10{ padding-bottom:10px; border-bottom:1px solid #000} 
  9. </style> 
  10. </head> 
  11. <body> 
  12. <p> 
  13. 下划线thinkcss距离调节实例 
  14. <span class="thinkcss-x5">我下划线距离为5px</span>
  15. <span class="thinkcss-x10">我的下划线距离为10px</span>
  16. <!-- html注释说明:这里为了完整截图代码所以将HTML内代码换行,不影响最终效果 -->
  17. </p> 
  18. </body> 
  19. </html> 

2、有距离间距下划线效果截图


CSS+DIV实例:CSS实现文字下划线间距控制效果截图

3、在线演示:查看案例

4、案例打包下载:

5、设置下划线总结
本来的下划线专用css样式text-decoration:underline可以设置文字下划线但不能实现下划线与文字间距调节,这样我们不使用text-decoration:underline下划线属性,使用下边框+padding-bottom下内补白边距来实现这样的样式,变通实现需求,也是CSS布局常见解决问题与布局网页方法。

扩展与下划线相关知识:
1、css下划线
2、DIV CSS如何去除去掉下划线
3、CSS去文字超链接下划线
4、CSS下划线颜色
5、网页文字添加下划线方法
6、html下划线
7、css下划线为虚线

相关标签: 下划线 距离
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/wenti/594.shtml

日期:2013-08-04 15:16:35 来源:www.thinkcss.com 作者:ThinkCSS

热门点击