Question

我已经访问了这个：How to increase the gap between text and underlining in CSS但我的方法使用了标签。上述问题中的OP使用css text-decoration:underline提供的方法有不同的

我的网页上有一个标有下划线的标题。

<h1><u>Hello</u></h1>

但是文本和下划线之间的差距很小，所以我尝试了这个：

u
{
   padding-top:10px;
}

和此：

u
{
   margin-top:10px;
}

但文本与下划线之间的差距仍然相同。知道如何增加差距吗？

Answer 1

HTML 4和XHTML 1中已弃用<u>标记，但已在HTML5中重新引入了其他语义。

如果要为文本加下划线，可以创建一个这样的包装元素：

<h1><span class="underline"><span>Hello</span></span></h1>

span.underline{
padding-bottom:3px;
border-bottom:3px solid black;
}

您可以通过更改padding-bottom

来增加文字与下划线之间的差距

Answer 2

试试这个解决方案：

u {
  padding-bottom:10px;
  text-decoration:none;
  border-bottom:3px solid #000;
}

<h1><u>Hello</u></h1>

您找到解决方案的方法的问题是u元素正在使用text-decoration作为底部边框。此边框无法移动，因为它位于文本上。解决方案是删除文本修饰，并在底部添加自己的边框。现在，您可以增加h1内容与padding-bottom边框之间的空间。

如果您想在其他元素上使用u元素，则必须在CSS上编写h1 u。

Answer 3

<h1><a>Hello</a></h1>

a
{
 vertical-align: top;
 border-bottom-width: 2px;
 border-bottom-style: solid;
 text-decoration: none;
 padding-bottom: 2px; //You can adjust the distance here.
}

http://jsfiddle.net/74vn0shc/

样式<u>标签

3 个答案: