开发者

span spacing after font-size change

开发者 https://www.devze.com 2023-02-18 06:58 出处:网络
I\'m having this strange problem where an undesired space is being produced when changing the font-size of a span.

I'm having this strange problem where an undesired space is being produced when changing the font-size of a span.

In a row I have two pieces of text together, a link and a span. I have the link and optionally the span can appea开发者_如何学运维r, if both of them have the same font-size when the span appears the spacing is the same as without the span.

If I set a lower font-size to the span the spacing becomes slightly bigger. I want to change the font-size of the span but keep the same spacing between rows as if the span wasn't there.

Hope I was clear enough so you can help me =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
}


Maybe you could use a margin or padding to set the spacing with a pixel value instead of using whitespace? This should give you more control.


I experimented and fiddled around with the code snippet:

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

and I could not quite see if there was an issue, partly because the issue may have to do with the font being used, the default font size for the browser and so on.

If you fix the line-height, then the spacing between the rows will not depend on the font-size in the rad class unless it is set to some sufficiently large value.

The horizontal spacing before the span due to the two &nbsp; is controlled by the font-size for the links, so should not depend on the rad class properties.

Try fixing the line-height of the a tags and see if that fixes the problem in your browser/system configuration.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号