Question

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 appear, 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
}

Answer 1

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   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.