跨度下划线具有填充或边距 [英] Underline breaks with spans have padding or margin

问题描述

当< span>

时，如何保持< a> code>标签里面，并与左/右填充或边距设置？这也有助于知道为什么会发生这种情况？

我可以使用box shadow或border bottom来替代，但我并不是在寻找这些解决方案。

>

span {padding-right：10px;}

< a href =＃> <跨度>&安培; LT;< /跨度> < span>上一页< / span>< / a>

在你的情况下， padding 会在两个文本之间增加10px的空间，所以我们可以使用字母间距与第一个 span 创建这个空间。

如果您参考规范您可以阅读：

下划线，上划线和直通线仅应用于文本
（包括空格，字母间距和单词间距）：边距，
边框和填充被跳过

span：first-child {letter-spacing：10px;}

< a href =＃> <跨度>&安培; LT;< /跨度> < span>上一页< / span>< / a>

为了使这个更通用，我们可以考虑使用伪元素来模拟 span ：

顺便说一下，不要忘记考虑在某些情况下已经存在的空白空间[如上所述]。

.first span：after {content：; letter-spacing：15px;}。second span：after {content：; letter-spacing：30px;} span：last-child :: after {display：none; / *不需要上一个孩子* /}

< a href =＃> <跨度> AA< /跨度> <跨度> BB< /跨度> < span> cc< / span>< / a>< br>< a href =＃>< span> aa< / span>< span> bb< / span>< span> cc< / span>< / a>< br>< a href =＃class =first> <跨度> AA< /跨度> <跨度> BB< /跨度> < span> cc< / span>< / a>< br>< a href =＃class =first>< span> aa< / span>< span> bb< / span> ;< span> cc< / span>< / a>< br>< a href =＃class =second> <跨度> AA< /跨度> <跨度> BB< /跨度> < span> cc< / span>< / a>

How can I keep the <a> tag underline running from left to right without any breaks when there are <span> tags inside, and with left/right padding or margin set? It would also be helpful to know why that happens?

I can probably use box shadow or border bottom instead, but I'm not looking for those solutions.

span {
  padding-right: 10px;
}

<a href="#">
  <span>&lt;</span>
  <span>Previous page</span>
</a>

解决方案

In your case padding will add 10px space between both text so we can instead use letter-spacing with the first span to create this space.

If you refer to the specification you can read:

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped

span:first-child {
  letter-spacing: 10px;
}

<a href="#">
  <span>&lt;</span>
  <span>Previous page</span>
</a>

To make this more generic we can consider letter-spacing with pseudo-element to simulate space between span:

By the way don't forget to consider white space [as mentionned above] that is already present in some cases.

.first span:after {
  content:" ";
  letter-spacing: 15px;
}

.second span:after {
  content:" ";
  letter-spacing: 30px;
}

span:last-child::after {
  display:none;  /* no need for last child*/
}

<a href="#">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>
<br>
<a href="#"><span>aa</span><span>bb</span><span>cc</span></a>
<br>
<a href="#" class="first">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>
<br>
<a href="#" class="first"><span>aa</span><span>bb</span><span>cc</span></a>
<br>
<a href="#" class="second">
  <span>aa</span>
  <span>bb</span>
  <span>cc</span>
</a>

这篇关于跨度下划线具有填充或边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！