css下划线与文字之间的距离如何设置?
程序员文章站
2022-04-07 21:46:40
...
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容。
在上一篇文章中我们介绍了关于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> 下划线距离</span> </body> </html>
效果如下:
从上图可以很容易就看出文字与下划线之间出现了一定的距离。
本篇文章到这里就全部结束了,更多内容大家可以关注相关教程栏目!!!
以上就是css下划线与文字之间的距离如何设置?的详细内容,更多请关注其它相关文章!
推荐阅读
-
WPS文字中如何设置上下左右页边距的距离及显示方向
-
软文营销:如何快速拉近软文与用户之间的心理距离?
-
解决Word中汉字与英文字母和数字之间的距离无法删除问题
-
为什么我的div与父div之间有距离?_html/css_WEB-ITnose
-
请问,页面之间的链接如何设置?_html/css_WEB-ITnose
-
如何设置
- 的点的大小,颜色,以及和文字的距离?_html/css_WEB-ITnose
-
css如何设置文字中间的小竖线?
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
初学HTML/CSS:图片如何在DIV中的垂直居中,文字与DIV中的间距如何消除_html/css_WEB-ITnose
-
如何设置一段文字,是它的宽度是页面宽度的62%且能自动换行?_html/css_WEB-ITnose