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

Html

Html Problem Overview


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

Html Solutions


Solution 1 - Html

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

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.

Solution 3 - Html

Not sure if this is what you're referring to, but this is the list of HTML entities you can use:

List of XML and HTML character entity references

Using the content within the 'Name' column you can just wrap these in an & and ;

E.g. &nbsp;, &emsp;, etc.

Solution 4 - Html

What about normal encoded white-space character?

&#32;

Solution 5 - Html

I used this Unicode Decimal Code &#8204; and worked. more details

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionwide_eyed_pupilView Question on Stackoverflow
Solution 1 - HtmlbookcaseyView Answer on Stackoverflow
Solution 2 - HtmlJukka K. KorpelaView Answer on Stackoverflow
Solution 3 - HtmlisNaN1247View Answer on Stackoverflow
Solution 4 - HtmlHelpNeederView Answer on Stackoverflow
Solution 5 - HtmlAli NassajpourView Answer on Stackoverflow