欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css下划线与文字之间的距离如何设置?

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

本篇文章给大家介绍一下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>

效果如下:

2345截图20181027114249.png

从上图可以很容易就看出文字与下划线之间出现了一定的距离。

本篇文章到这里就全部结束了,更多内容大家可以关注杨雨个人博客相关教程栏目!!! 本文地址:http://itbyc.com/web/css3/20367.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1