css中下划线和文字部分重叠且长度和文字自适应
发布网友
发布时间：2022-04-19 22:25
共3个回答
懂视网
时间：2022-04-28 17:17
在上一篇文章中我们介绍了关于css下划线的设置方法，但是设置出来的下划线感觉与文字之间距离太近，有时在网页中会显得不太美观，那么如何设置css下划线与文字之间的距离呢？本篇文章就来给大家介绍有关css下划线与文字之间距离的设置方法。
css中text-decoration属性设置出来的文字下划线不能够调整文字与下划线之间的距离，所以我们如果要调整下划线与文字之间的距离只能够使用border-bottom属性来设置文字下划线，下面我们就来看具体的实现方法。
我们设置css下划线与文字之间的距离需要用到的属性是padding-bottom和border-bottom
具体的代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
span{
border-bottom: 2px solid pink;
padding-bottom: 10px;
}
</style>
</head>
<body>
<span>
Gxlcms下划线距离</span>
</body>
</html>效果如下：
从上图可以很容易就看出文字与下划线之间出现了一定的距离。
本篇文章到这里就全部结束了，更多内容大家可以关注Gxlcms相关教程栏目！！！
热心网友
时间：2022-04-28 14:25
text-decoration-skip是与text-decoration相关的CSS3属性。
效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。
此方法是最原生的，但是由于兼容性问题，目前还不太合适。
方法二：使用border-bottom属性模拟
我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^
内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）
代码如下：
a {
text-decoration: none;
border-bottom: 1px solid;
}
这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线 :P
a {
text-decoration: none;
border-bottom: 1px dashed;
}
效果图：金玉全王
方法三：使用box-shadow属性模拟
使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)
直接上代码~
a {
text-decoration: none;
box-shadow: 0 1px;
}
这里box-shadow用了两个值，在这里解释一下：
box-shadow: h-shadow v-shadow blur spread color inset;
此处的两个值分别是 h-shadow 和 v-shadow。
h-shadow：水平阴影的位置。允许负值。
v-shadow：垂直阴影的位置。允许负值。
垂直阴影为1px于是就有了下划线的样子。
相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。
但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。
热心网友
时间：2022-04-28 15:43
text-decoration-skip是与text-decoration相关的CSS3属性。
效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。
此方法是最原生的，但是由于兼容性问题，目前还不太合适。
方法二：使用border-bottom属性模拟
我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^
内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）
代码如下：
a {
text-decoration: none;
border-bottom: 1px solid;
}
这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线 :P
a {
text-decoration: none;
border-bottom: 1px dashed;
}
效果图：金玉全王
方法三：使用box-shadow属性模拟
使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)
直接上代码~
a {
text-decoration: none;
box-shadow: 0 1px;
}
这里box-shadow用了两个值，在这里解释一下：
box-shadow: h-shadow v-shadow blur spread color inset;
此处的两个值分别是 h-shadow 和 v-shadow。
h-shadow：水平阴影的位置。允许负值。
v-shadow：垂直阴影的位置。允许负值。
垂直阴影为1px于是就有了下划线的样子。
相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。
但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。
