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

 我来答
山东文汇
2017-05-24 · 我们年轻我们有活力、我们执着我们有耐心。
山东文汇
专业的软件开发服务商,网站开发、APP开发、微信小程序、商城小程序、知识付费产品。
向TA提问
展开全部

使用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>
yfcp
推荐于2017-10-01 · 知道合伙人软件行家
yfcp
知道合伙人软件行家
采纳数:1748 获赞数:5545
有多年网站建设相关工作经验。熟悉ASP、ASP.net、VB、JavaScript、HTML等语言和CSS、Ajax等相关技术。

向TA提问 私信TA
展开全部
下划线专用css样式text-decoration:underline可以设置文字下划线,但不能实现下划线与文字间距调节。使用下边框+padding-bottom下内补白边距来实现这样的样式,变通实现需求,也是CSS布局常见解决问题与布局网页方法。
下划线divcss5距离调节实例:
<style>
.divcss5-x5{ padding-bottom:5px; border-bottom:1px solid #000}
.divcss5-x10{ padding-bottom:10px; border-bottom:1px solid #000}
</style>
<span class="divcss5-x5">我下划线距离为5px</span>,
<span class="divcss5-x10">我的下划线距离为10px</span>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
七__天
2015-09-15 · TA获得超过231个赞
知道答主
回答量:181
采纳率:0%
帮助的人:105万
展开全部
  1. 给div一个高度,设置div的下划线。如果div里有多行内容的话,每行内容应该是用li控制的,那就设置li的高度li设置下划线。

  2. 设置好下划线之后,我们要做的就是文字的行高了,以li为例,如果li的高度是30px,那么你设置勇气line-height=30px,文字就会居中,可以调整相应的高度来设置文字和下划线之间的间距。

  • 电脑刚做的系统,还没有安装相应的编程软件,就不给详细操作步骤了。


  • 合理的控制行间距能够体现网站的整体美观(大气)效果,如果网站比较宽建议间距可以大一些来体现内容的充实与大气。正常的网站宽度或者稍窄的宽度要根据实际情况来确定网站的相应的间距。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
育知同创教育
2018-06-28 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
下划线专用css样式text-decoration:underline可以设置文字下划线,但不能实现下划线与文字间距调节。使用下边框+padding-bottom下内补白边距来实现这样的样式,变通实现需求,也是CSS布局常见解决问题与布局网页方法。
下划线divcss5距离调节实例:
<style>
.divcss5-x5{ padding-bottom:5px; border-bottom:1px solid #000}
.divcss5-x10{ padding-bottom:10px; border-bottom:1px solid #000}
</style>
<span class="divcss5-x5">我下划线距离为5px</span>,
<span class="divcss5-x10">我的下划线距离为10px</span>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友e3fcfba
2014-11-24 · TA获得超过882个赞
知道小有建树答主
回答量:556
采纳率:50%
帮助的人:453万
展开全部
使用padding-bottom、border-bottom两个样式实现字体文字下划线距离设置。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式