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

html-css020

如何div css设置文字字体下划线距离间距,第1张

使用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>

题目的意思应该是，有很多行文字，想在这很多行文字下每一行都加个下划线。很多人答在盒子地下加下划线是不合适的，请认证审题。有2种方法1.text-decoration:underline2.把P标签改成span标签用border-bottom想改下划线位置可以用padding虽然过去好几年了，不过还是改一改吧。

其实可以写个div，给div的下边框加上线条，控制div的长度就可以了

.token {

    width: 300px

    border-bottom: 1px solid black

}

<div class="token">外婆家私房菜:账户管理</div>