Question

我遇到这个奇怪的问题，在更改跨度的字体大小时会产生不需要的空间。

连续我有两段文字，一个链接和一个跨度。我有链接，并且可选地可以显示跨度，如果它们在跨度出现时具有相同的字体大小，则间距与没有跨度相同。

如果我将较小的字体大小设置为跨度，则间距会略大一些。我想更改跨度的字体大小，但保持行之间的间距相同，就好像跨度不存在一样。

希望我足够清楚所以你可以帮助我= D

HTML

 <table id="peda" align="center" width="100%" style="table-layout:fixed;
   word-wrap:break-word" border="0">
        <tr>
         <td align="left"><h1><a class="categoria" 
              href="unrad">categoria</a>&nbsp;&nbsp;
            <span class="rad">rad</span></h1></td>
        </tr>
        <tr>
            <td align="left">&nbsp;<a href="res">res</a></td>
        </tr>
  </table>

CSS：

a.categoria:link, a.categoria:visited {
    color: #424242;
    text-decoration: none;
}
a.categoria:hover {
    color: #424242;
}

span.rad{
    color: #5b80b2;
    font-size:10px;
    padding:0px;
    margin:0px
}

Answer 1

也许您可以使用边距或填充来设置带有像素值的间距而不是使用空格？这应该会给你更多的控制权。

Answer 2

我试验并摆弄了代码片段：

http://jsfiddle.net/audetwebdesign/wXJLG/

我无法确定是否存在问题，部分原因是该问题可能与使用的字体，浏览器的默认字体大小等有关。

如果您修复了line-height，那么行之间的间距将不依赖于rad类中的字体大小，除非它被设置为某个足够大的值。

由于两个span导致 之前的水平间距由链接的字体大小控制，因此不应该依赖于rad类属性。

尝试修复a代码的行高，看看是否能解决浏览器/系统配置中的问题。

字体大小更改后的跨度间距

2 个答案: