用CSS下划线距离

但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了,很难看。

代码一:

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

代码二:

a { text-decoration: none; padding:0 0 6 0; border-bottom-color:0; border-bottom-width:1px; border-bottom-style:solid; }

代码三:

a{
text-decoration:none;
border-bottom:1px solid #ccc; /* #ccc换成链接的颜色 */
display: inline-block;
padding-bottom:10px;  /*这里设置你要空的距离*/
}
时间: 2024-11-01 13:54:18

用CSS下划线距离的相关文章

html div + css 下划线

这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border:1px dashed #000; 黑色虚线边框实例:CSS代码: .divcss5{border:1px dashed #000; height:50px;width:350px}Html代码: <div class="divcss5">我的四边为黑色虚线边框</di

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

使用CSS去除 去掉超链接的下划线方法

我们可以用CSS语法来控制超链接的形式.颜色变化,为什么链接一定要使用下划线和颜色区分呢? 其主要原因主要是考虑到   1.视力差的人 2.色盲的人 ... 下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色:当鼠标在链接上时有下划线,链接文字显示为红色:当点击链接后,链接无下划线,显示为绿色. 实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制: <style type="text/css"> <

网页中添加下划线的方法汇总及优缺点

本文主要介绍了添加下划线样式的几乎所有方法,并且比较了每一种方法的优缺点.没想到之前一直没有注意的下划线还有这么多玄机奥秘! 本文由 nzbin 翻译,艾凌风 校稿.未经许可,禁止转载! 英文出处:css-tricks.com 发表地址:http://web.jobbole.com/89425/ 有很多种添加下划线样式的方法.可能你还记得< Crafting link underlines on Medium >这篇文章.Medium 并没有尝试特殊的方法,只是想创建一个漂亮的看起来正常的下划

css基础 给p标签中的内容 加粗,斜体,下划线,字体大小

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ part code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

CSS 类名的单词连字符:下划线还是连接符?

问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-detail 下划线连接: solution_title.solution_detail 应该采用哪种写法呢?选择的时候是出于个人习惯还是有别的考虑? 看了下豆瓣,美团,淘宝的源码,都是采用 solution_title 的写法. 我的回答 首先定个性,这是个纯粹的“代码风格”问题. 什么是“代码风格”问题

[CSS]textarea设置下划线格式

功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线  2:textarea文本框里面有一段不能删掉 实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加text-indent来实现缩进. 源代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text

css如何去掉新闻列表最后一个新闻的下划线

css如何去掉新闻列表最后一个新闻的下划线:本章节分享一个比较使用的效果,那就是如何去掉新闻列表最后一个新闻的下划线.在很多新闻列表效果中,在每一个新闻下面都有一个虚线或者其他什么形式的下划线,总之感觉有比较美观的,但是往往最后一个新闻是不需要这个下划线的,下面介绍一下如何实现此效果.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="

CSS改变字体下划线颜色

下图是网页中一个很普通的列表. 这次去见客户的时候,客户觉得下划线的颜色可以变变,网页就变得不单调了(据后来了解,客户上学时出板报,所以对网站的布局和细节非常的重视).做网站那么久,第一次要换下划线颜色,客户就是上帝,提出这个需求,立马查阅相关资料,发现下划线颜色是随着字体的颜色改变的,不能单独改变. 额,那怎么办? 办法总比困难多,通过使用css border-bottom实现改变文字字体下划线颜色即可. CSS代码:style="border-bottom: 1px solid blue;t