Mailtrap Blog

&nbsp and HTML Space Challenges and Tricks

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. 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 &nbsp. 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 be likely to 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, along with the corresponding codes:

NameHTML EntityEntity Number
Non-breaking space&nbsp;&#160;
Less than (<)&lt;&#60;
More than (>)&gt;&#62;
Ampersand (&)&amp;&#38;
Euro (€)&euro;&#8364;
Pound (£)&pound;&#163;
double quotation mark (“)&quot;&#34;
single quotation mark (apostrophe) (‘)&apos;&#39;

There are many more HTML entities though. This list should be an excellent reference to keep in your bookmarks.

What does &nbsp mean?

&nbsp 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 $ 5

On smaller screens, it could be cut into two parts, like this, for example:

Beer in this store
costs $ 5

But 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 &nbsp 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
$ 5

But never in the way described above.

Another, less common use for &nbsp 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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; wait for it... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5 $

would give you the desired effect.

When not to use &nbsp

You’ve got to admit, the code above is not very readable. At the same time, creating multiple spaces with the use of &nbsp 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. &nbsp 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:

NameHTML EntityEntity Number
En space&ensp;&#8194;
Em space&emsp;&#8239;
Narrow no-break space&#8239;
3-per-em space&emsp13;&#8196;
figure space&numsp;&#8199;
punctuation space&puncsp;&#8200;
thin space&thinsp;&#8201;
hair space&hairsp;&#8202;

&nbsp 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 &nbsp 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 = '&nbsp';
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 &nbsp – for example, EditorsKit, wp-Typography, or Advanced Editor Tools.

Join our newsletterOnly the best content, delivered once a month. Unsubscribe anytime.

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 &nbsp 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 ought to use different approaches.

All in all, we highly recommend testing each of the HTML emails you send with Mailtrap.

It’s a pre-production testing environment that captures your outgoing emails and lets you inspect them for errors in HTML and CSS, among many other features. If a certain element may cause errors in particular browsers, you’ll know about it right away.

Here are the alternatives to &nbsp that we can certainly recommend:

Cellpadding

Cellpadding is an HTML attribute used to specify the distance (in pixels) between the call 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 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 arguable 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 space. 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.

Inspect Your Emails

Spacing between images in HTML

&nbsp is also not the right solution when trying to separate images. It works only 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:

<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 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 it 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 &nbsp 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 &nbsp 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 ‘&zwnj;&nbsp;’ 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;">
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>

Note that some ESPs such as MailChimp won’t let you add &nbsp nor &zwnj tags to its customizable “Preview text.” It’s easy to add them elsewhere though.

In MailChimp, drag a code block right into 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;">
&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>

Wrapping up

As you can see above, &nbsp can be useful at times, but, very often, there are better approaches available. Time will tell whether &nbsp will prevail or one of the more flexible solutions will completely override it.

If you’re interested in diving deeper into the topic, check out our guide on building HTML emails. If you’re struggling with Outlook, our article on fixing Outlook rendering issues may be of some help.

Until next time!

Exit mobile version