文本和下划线之间的间距答案

【问题标题】：spacing between text and underline文本和下划线之间的间距
【发布时间】：2013-12-01 15:02:52
【问题描述】：

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

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

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

【问题讨论】：

stackoverflow.com/questions/1734618/…
space between text and underline的可能重复

标签： html css

【解决方案1】：

恐怕这本身是不可能的，但你可以做的是应用border-bottom 来替代background-image

【讨论】：

【解决方案2】：

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

编辑：如果您想要“下划线”的相同颜色（在我的示例中是边框），您只需省略颜色声明，即border-bottom-width：1px 和border-bottom-style：solid .

【讨论】：

【解决方案3】：

不是没有技巧，不是。一个简单的解决方案是将文本包装在另一个 span 中并为其设置下边框。

<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/

【讨论】：

不需要额外的wrapper，可以直接在.title_span里面传递边框属性：jsfiddle.net/m9RQ9/2
当我将 padding-left 应用于 title_span 时，下划线保持在初始位置。它应该沿着文本移动。 @Aaron Digulla
@Tayyab_Hussain：填充物在盒子里面。试试边距。