Are there other whitespace codes like &nbsp for half-spaces, em-spaces, en-spaces etc useful in HTML?

Wondering if there are other codes available to use in an HTML newsletter.

I would use cell padding or margins but I'm new to this HTML/CSS thing and I can't find a change that does effect both the Main Title line and the sub-head under it. Being an email I'm hesitant to go mucking around with the CSS to get it just so — since I don't know what email clients don't like in the way of CSS as opposed to inline markup.

For context the template I'm using is Mute theme from Mailchimp snip:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

The whole email as a web page can be seen here


Solution 1:

Yes, many.

Including, but not limited to:

  • [ ] hair space : &#8202; or &hairsp;
  • [ ] 6-per-em space : &#8198; (no character reference available)
  • [ ] narrow no-break space : &#8239; (no character reference available)
  • [ ] thin space : &#8201; or &thinsp;
  • [ ] 4-per-em space : &#8197; or &emsp14;
  • [ ] non breaking space : &#160; or &nbsp;
  • [ ] punctuation space : &#8200; or &puncsp;
  • [ ] 3-per-em space : &#8196; or &emsp13;
  • [ ] en space : &#8194; or &ensp;
  • [ ] figure space : &#8199; or &numsp;
  • [ ] em space : &#8195; or &emsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>

Solution 2:

There are codes for other space characters, and the codes as such work well, but the characters themselves are legacy character. They have been included into character sets only due to their presence in existing character data, rather than for use in new documents. For some combinations of font and browser version, they may cause a generic glyph of unrepresentable character to be shown. For details, check my page about Unicode spaces.

So using CSS is safer and lets you specify any desired amount of spacing, not just the specific widths of fixed-width spaces. If you just want to have added spacing around your h2 elements, as it seems to me, then setting padding on those elements (changing the value of the padding: 0 settings that you already have) should work fine.