css控制多行文本的下划线距离

css控制多行文本的下划线距离

css自带的下划线样式

在css中可以使用自带的样式text-decoration: underline;来对文本添加下划线，但是这样的下划线往往并不美观，因为下划线和文本靠的太近，如果字号太小，甚至影响阅读。

加边框式下划线

在css中让一个块的边框来模拟下划线，可以较好的控制下滑线的距离，代码如下：

border-bottom: solid 1px #000;
padding: 5px;

但是这有个问题就是一个块只能有一个下划线，这对于一个文本域来说并不是很方便。

文本域多行文本加下划线

如果要让一段文本都有下划线且是可控的下滑线，那么可以使用如下方法：

display: inline;
border-bottom: solid 1px #000;
padding-bottom: .1rem;

或者使用<span>之类的行级元素标签，两种方法的效果是一样的，只要让这段字变成行级元素就可以了。