Html 文本和下划线之间的间距

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20048189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:09:03  来源:igfitidea点击:

spacing between text and underline

htmlcss

提问by Anton.P

I am looking for a way to enlarge the distance between the text and underline on my pages. i use mainly CSS but i had to use tags as well, basicly my question considers both cases. is there a way to change this spacing? the code is pretty simple:

我正在寻找一种方法来扩大页面上文本和下划线之间的距离。我主要使用 CSS,但我也必须使用标签,基本上我的问题考虑了这两种情况。有没有办法改变这个间距?代码非常简单:

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

my other posibility is try somehow use background for the span using 1px picture and repeat against X axis i am looking for cleaner solution.

我的另一个可能性是尝试使用 1px 图片以某种方式使用跨度的背景,并针对 X 轴重复我正在寻找更清洁的解决方案。

采纳答案by Aaron Digulla

Not without tricks, no. One simple solution is to wrap the text in another span and give that a bottom border.

不是没有技巧,不。一个简单的解决方案是将文本包装在另一个跨度中并为其设置底部边框。

<span class="underline"><span class="title_span">title of something</span></span>

.title_span {
 font-weight: bold;
 text-decoration: underline;
 color: grey;
}

.underline {
    padding-bottom: 2px;
    border-bottom: grey 1px solid;
}

http://jsfiddle.net/m9RQ9/

http://jsfiddle.net/m9RQ9/

回答by SW4

I'm afraid this isn't possible per se, but what you can do is apply a border-bottomas an alternative to background-image

恐怕这本身是不可能的,但是您可以做的是应用 aborder-bottom作为替代background-image

回答by Venu immadi

spacing between text and underline its No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

文本和下划线之间的间距为否,但您可以使用诸如 border-bottom: 1px solid #000 和 padding-bottom: 3px 之类的东西。

edit: if you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

编辑:如果您想要与“下划线”(在我的示例中是边框)相同的颜色,则只需省略颜色声明,即 border-bottom-width: 1px 和 border-bottom-style:solid。