Why is non-break space ( ) converting to a dash character (-)?

Question

I'm creating an HTML newsletter and I need to show some empty anchor links with specified height, width and block-level display, but Gmail seems to remove empty <a> links, so I put   in links and it works like a charm but it renders   as - character.

I checked both Mozilla Firefox and Google Chrome and the problem exists in both browsers. Any ideas?

Code Sample:

<table cellpadding="0" cellspacing="0" width="100%">
    <tbody>
        <tr>
            <td height="42" width="49" style="height: 42px; width: 49px"></td>
            <td height="42" width="123" style="height: 42px; width: 123px">
                <a href="http://www.youtube.com/user/adsf" style="display: block; height: 42px; width: 123px">&nbsp;</a>
            </td>
            <td height="42" width="79" style="height: 42px; width: 79px">
                <a href="http://asdf.asdf.dsf" style="display: block; height: 42px; width: 79px">&nbsp;</a>
            </td>
            <td height="42" width="129" style="height: 42px; width: 129px">
                <a href="https://www.facebook.com/asdfasdf" style="display: block; height: 42px; width: 129px">&nbsp;</a>
            </td>
            <td height="42" width="111" style="height: 42px; width: 111px">
                <a href="https://twitter.com/adfdasff" style="display: block; height: 42px; width: 111px">&nbsp;</a>
            </td>
            <td height="42" width="269" style="height: 42px; width: 269px"></td>
        </tr>
    </tbody>
</table>

In fact, it has nothing to do with Gmail. The problem exists in my HTML project too.

Answer 1

I imagine the problem is that the space is underlined, like a link normally would be. You would have to set text-decoration to stop this.

As it is an HTML newsletter, I presume you want to do this inline:

<a style="text-decoration: none;">&nbsp;</a>

Answer 2

You have three solutions:

1- using <br/> inside your <a> element i.e :

<a href="#"><br/></a>

if you want to control the height of the element use this:

<a href="#" style="height:20px;overflow:hidden;"><br/></a>

2- using text-decoration:none with  

<a href="#" style="text-decoration:none;">&nbsp;</a>

3- using text-indent with height and width

<a href="#" style="text-indent:999px;width:0px;height:0px;overflow:hidden;">&nbsp;</a>