Skip to Navigation
Space may seem like the most obvious thing ever to an external observer. You hit the giant ‘space’ button, space appears, as expected, and you move on. However, in reality, typing in spaces is quite tricky, and there are numerous ways of going around it in HTML. Pick the wrong one, and what the browser renders on the recipient’s end may ruin what you had in mind.
One of the standard entities used in HTML is . Today, we’ll explore what it is, when to use it, and when to avoid it. We’ll also share several cool hacks for using spacing in various written forms.
The key HTML entities
HTML entities are strings used to represent many reserved and invisible characters in HTML. These could be ‘<‘ or ‘>’ symbols, currencies (e.g. ‘€’ or ‘£’), and common signs such as quotation marks or, you guessed it, spaces.
If you were to use either of the entities directly in the code, the browser would interpret them as HTML and render them accordingly. For example, ‘<‘ or ‘>’ would likely be treated as the beginning or end of an HTML tag.
To make it clear to each browser what it should render, we use HTML entities, and we wrap them in an ampersand (&) at the beginning and a semicolon (;) at the end.
Here are some of the most common entities:
| Name | HTML Entity |
| Non-breaking space | |
| Less than (<) | < |
| More than (>) | > |
| Ampersand (&) | & |
| Euro (€) | € |
| Pound (£) | £ |
| double quotation mark (“) | " |
There are many more HTML entities though. This list should be an excellent reference to keep in your bookmarks.
What does   mean?
is actually one of the most frequently used HTML entities. Nbsp stands for non-breaking space, meaning that strings separated with this entity will not be separated and put into separate lines.
To give you an example, let’s look at the following sentence:
Beer in this store costs $ 5On smaller screens, it could be cut into two parts, like this, for example:
Beer in this store
costs $ 5But sometimes it could be cut like this, which is rather unfortunate.
Beer in this store costs $
5 To avoid such awkward collapses, we use the entity to glue ‘$’ and ‘5’ to each other. When inserted in between those characters, the sentence could, at worst, collapse as follows:
Beer in this store costs
$ 5But never in the way described above.
Another, less common use for is for creating multiple spaces. If you were to use the regular ‘ ‘ space character multiple times, a browser would always parse it down to just one space. So the following code:
Price of this beer: wait for it... 5 $would still be rendered as:
Price of this beer: wait for it... 5 $destroying your Barney Stinson moment. Coding it like this, though:
Price of this beer: wait for it... 5 $would give you the desired effect.
When not to use  
You’ve got to admit, the code above is not very readable. At the same time, creating multiple spaces with the use of is a poor design practice. What may look OK on your screen is almost certain to collapse in an uncontrollable way on the user’s end because of the enormous diversity of screen sizes and resolutions.
Because of that, paddings, margins, or width are nearly always better approaches when designing responsive pages. We’ll discuss them all in the following chapter. is a useful way of keeping characters together, but should probably be used just for that purpose.
Other spaces available in HTML
When separating words or other elements, you’re not limited just to a regular and non-breaking space. The list of available white space characters is very long. Here are some of the most commonly used ones:
| Name | HTML Entity |
| En space |   |
| Em space |   |
| Narrow no-break space | – |
| 3-per-em space |   |
| figure space |   |
| punctuation space |   |
| thin space |   |
| hair space |   |
  in WordPress
WordPress’s Gutenberg editor offers an easy way of inserting non-breaking spaces into articles. Instead of a space, press Option+Space on Mac or Ctrl+Shift+Space on Windows.
In the old HTML editor, this can be more tricky. You can try inserting right into the editor. However, if your theme doesn’t have CSS rules specifying how it should be rendered (and many don’t), you’ll probably see a raw code displayed on the page.
A more reliable solution may be a simple shortcode defined in the functions.php file of your theme:
//[nbsp] shortcode
function nbsp_shortcode( $atts, $content = null ) {
$content = ' ';
return $content;
}
add_shortcode( 'nbsp', 'nbsp_shortcode' );that you can then call whenever you need a non-breaking space with ‘[nbsp]’.
(kudos to @bncpeter for the code)
Alternatively, you can use one of the popular text editors for WP that support – for example, EditorsKit, wp-Typography, or Advanced Editor Tools.
Spaces in HTML emails
Creating spaces in HTML emails is also far from straightforward. This is because of a lack of standards that would be recognized by all major email clients. What works for Gmail or Outlook may cause some issues on Yahoo! Mail, for example. And the other way around.
Email development, in general, is quite different from web development. All CSS goes inline. Buttons work differently. And, worst of all, everything is built on tables. The latter aspect, in particular, makes using impractical.
It’s still alright to keep certain characters together. You can run a certain nifty email hack without it (we’re going to talk about that towards the end of the article). But, when formatting emails, you should use different approaches.
Cellpadding
Cellpadding is an HTML attribute used to specify the distance (in pixels) between the cell content and the wall. It’s a universal solution for creating spaces because nearly all email clients support tables. And if they do, they also recognize the cellpadding attribute and position the content according to its value. For example:
cellpadding="12"means there will be a 12px distance between the content and both of the walls on either side of it.
The drawback of this approach is that it cannot be overridden. Cellpadding is an HTML attribute. As such, CSS can’t override it, particularly with its media queries.
Padding
Padding, on the other hand, is a CSS attribute that can be freely overridden. Padding is incredibly helpful when designing HTML emails for both web and mobile devices. In such a case, it’s always a good idea to use media queries to specify individual paddings for either version of a message rather than rely on a one-size-fits-all approach.
The syntax of a CSS padding is very straightforward – for example:
style="padding:15px;"As the approach lacks any significant drawbacks, it’s arguably the best way to add spacing, especially in table cells.
Empty cells
Another method is with <td> HTML tags. Normally, <td> tags define typical data cells. When left empty, they create invisible cells that can be used to create spacing. There are several reasons why this is a rarely used approach.
First, and maybe most importantly, cells defined this way don’t always retain their height. Some clients will respect them; others will omit the spacing created this way. There’s a high probability that carefully typed in <td>’s will result in no spacing at all, making your copy potentially unreadable.
What’s more, using them requires building entire tables that you potentially wouldn’t use otherwise. And, if you’re coding for mobile (and who isn’t?), you’ll need to write new classes to control the invisible cells’ height and width – all of these, with no guarantee that the spacing will render in the first place.
Margin
Margin is a CSS element that is similar in a way to padding. The difference between the two is that while padding adds spacing inside a cell, margin does so outside it. The example syntax of margin looks as follows:
style="margin:10px;"Margins are frequently used in web development to create spacing between elements. However, in email development, they fall short because of a lack of standards and inconsistencies between email clients.
Break
The <br> tag is a popular way of creating spaces in HTML. While it’s handy in blog posts such as this one, there’s a familiar problem that surfaces when trying to use it in emails. Again, email clients treat it very differently. Some render wider gaps; some opt for more narrow spaces. As a result, it’s virtually impossible to predict how an email will look on the recipient’s end.
Because of that, the <br>tag is only recommended when creating breaks between text.
Testing your HTML email
Whichever approach you choose for implementing spaces in your HTML emails, it’s important you test the emails using tools such as Mailtrap Email Sandbox.
Mailtrap Email Sandbox is an email testing solution used by developers who want to inspect and debug their emails in a safe environment before sending them to recipients. The solution automates email testing and removes the risk of spamming recipients in the process. It also comes with many features, including multiple inboxes for different projects and project stages, email content spam score checking and previewing, blacklist reporting, insight into tech info, automatic or manual email forwarding, and much more.
One feature that makes Email Sandbox particularly handy in terms of HTML emails is its HTML/CSS Check. With this feature, you can get an estimation of the support for your emails’ code across popular email clients and also find any problematic elements in your emails.
Once you send a test email to your Email Sandbox virtual inbox, at the top of the HTML/CSS Check tab will be a percentage representing the market support for the HTML elements/CSS rules used in the email. This percentage is calculated using support data from various email clients while taking into consideration their market share.
You can also filter through the market support results based on device and/or email client.
Below the market support percentage section will be a list of HTML elements/CSS rules that are only partially supported or not supported at all. For each element/rule, you will be able to see its name, clients that don’t/partially support it, links to code lines containing it, and a show more link that reveals a section with more information once clicked on.
If you click on a link leading to a code line containing a specific element/rule, you will be redirected to the HTML Source tab displaying your email’s entire HTML code. There, each problematic element/rule will be marked with an orange or red circle that has an exclamation mark inside of it.
Other tabs that will help you with testing your HTML emails are the HTML tab which shows you how a web browser renders your email; the Text tab, which displays the text part of your email; and the Raw tab, which gives you a raw format preview.
To get started with Mailtrap Email Sandbox, first create a Mailtrap account. Then, log in and go to Sandbox – > Inboxes – > SMTP Settings and choose whether you want to send your first test email by pasting a few lines of code into your app script or by pasting SMTP credentials into your email sending script, MTA settings, email client settings, or some other system that supports SMTP credentials.
If you completed all the setup steps correctly and sent off your test email, it should land in your virtual inbox instantly, where you can proceed with the testing and debugging.
Spacing between images in HTML
is also not the right solution when trying to separate images. It only works with words and won’t have any visible effect when placed between media of any type. If you’re building an HTML page, two previously mentioned approaches will do a better job:
<br>is still an option if you want to separate two or more vertically aligned images. As was the case above, the gap between elements separated with<br>may vary.- Paddings and/or margins are nearly always a more reliable approach. Here’s an example of using margins and creating spacing above, below, on the left and on the right side of an image in question:
<img src="(image1.jpg)" style="margin: 0px 0px 0px 0px;" >How to remove spacing between images in HTML emails?
On the other hand, you may want to get rid of the space that some email clients add by default. It’s a frequent issue with some versions of Outlook, but also with the ever-so-popular Gmail. There are several methods for tacking this in HTML.
Most often, the gap appears because images don’t have a proper styling tag. Since email clients aren’t instructed on how to render those images, they assign a display:in-block tag to each of them. As a result, a small gap appears around each image or other elements of an email. You can override this by inserting the display:block tag for each image.
<img src="https://www.mailtrap.io/image1.jpg" style="display:block">When you only have two images, another method would be to set them to float accordingly. For example:
<img src="https://www.mailtrap.io/image1.jpg" style="float:right">Make sure you add those inline for each visual as Gmail doesn’t offer support for embedded and style sheets.
Alternatively, consider removing the paddings and set a low (<10px) line-height above the container with an image. For example:
<td style="padding: 0; line-height: 5px;">
<img src="http://www.mailtrap.io/image1.jpg" style="width: 600px; height: 274px; display: block;" alt="image1">
</td>&zwnj and   preheader hack
Preheader is a preview text that’s displayed by most email clients along with an email subject. It has a significant impact on email conversion.
A random preheader text (usually “Not displaying correctly? …” or a repeated subject) can discourage a reader from opening a message. A carefully crafted preheader giving an insight into what’s inside a message can significantly boost the open rates.
Very often, email clients will grab the first couple of dozen characters from the beginning of a message and display it along with a subject. More often than not, this is not what you would hope to show in this very exposed spot.
Luckily, there’s a straightforward hack you can use to your advantage. It uses our favorite tag along with its cousin, &zwjn; (zero-width non-joiner). The former creates invisible spaces, as it always does. The latter guarantees that the email copy that follows won’t be pulled into the preheader.
The idea is to create multiple repetitions of ‌ and insert a perfect preheader right ahead of them. At the same time, because of the ‘display: none’ attribute, the preheader won’t display in the actual email. Here’s the example code:
<div style="display: none; max-height: 0px; overflow: hidden;">
This is our fantastic hidden preheader text
</div>
<div style="display: none; max-height: 0px; overflow: hidden;">
</div>Note that some ESPs such as MailChimp won’t let you add nor ‌ tags to its customizable “Preview text.” However, it’s easy to add them elsewhere though.
In MailChimp, drag a code block right to the top of your email. Delete what appears in there and insert the identical code as above:
<div style="display: none; max-height: 0px; overflow: hidden;">
</div>Wrapping up
As you can see above, can be useful at times, but, very often, there are better approaches available. Time will tell whether will prevail or one of the more flexible solutions will completely override it.
If you’re interested in diving deeper into the topic, then check out our guide on building HTML emails. If you’re struggling with Outlook, our article on fixing Outlook rendering issues may also be of some help.
Until next time!
Comments
1 replies