字体大小更改后的跨距答案

【问题标题】：span spacing after font-size change字体大小更改后的跨距
【发布时间】：2011-03-23 05:18:25
【问题描述】：

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

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

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

希望我说的足够清楚，所以你可以帮助我=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
}

【问题讨论】：

您使用的是哪种浏览器？我无法在 Firefox 上重现该问题。顺便说一句，在第二个 <tr> 标记之前缺少一个 </tr> 标记。
感谢修复，我正在使用 chrome

标签： html css

【解决方案1】：

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

【讨论】：

我说的是第一行和第二行内容之间的垂直空间。我尝试删除空格以查看它们是否真的造成了麻烦，但不，有或没有它们都是一样的。
我希望是这样，请参阅我上面关于水平间距的评论。

【解决方案2】：

我对代码 sn-p 进行了试验和摆弄：

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

我不太清楚是否存在问题，部分原因是问题可能与所使用的字体、浏览器的默认字体大小等有关。

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

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

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

【讨论】：

添加行高：0px；跨度类解决了这个问题，谢谢：D