HTML下划线

发表于 更新于 分类于 ， Waline： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

CSS设置下划线与文字间距距离(CSS文字下划线距离设置)

使用CSS单词介绍

  • padding-bottom——设置内容与对象下边框的距离
  • border-bottom——设置对象下边边框

读音

英文 读音
padding
border
bottom

实现过程

这里不是使用text-decoration下划线属性来实现的，而是使用底部边框属性border-bottom实现下划线一样效果，然后利用内底部边距padding-bottom设置下边框与文本的间距

CSS底部边框实现下划线效果

这里还是使用HTML <u> 标签来实现下划线，不过这里使用自己的样式:

  • 首先去掉自带的下线样式，
  • 然后用下边框实现下划线的效果，
  • 使用底部内边距设置下划线与文本的距离
1
2
3
4
5
6
7
/*定义html 下划线u的下划线样式*/
u {
/* 去掉原来的下划线样式 */
text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid #F00
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下划线与文字距离改变 在线演示 Thinkcss</title>
    <style>
        /*定义html 下划线u的下划线样式*/
        u {
            /* 去掉原来的下划线样式 */
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 2px solid #F00
        }
    </style>
</head>
<body>
    <u>下划线</u>
</body>
</html>

显示效果：

下划线样式

参考链接

http://css5.com.cn/jiqiao/914.shtml