Spacing in HTLM Email Code

Creating an email, coding it, and designing it can be quite a tricky task. Different email clients and devices display emails differently, which can be a problem for your ad campaign. Adding space to HTML email templates is still a difficult topic. Given that there is no single standard for email clients, there is no unique methodology for adding intervals to your template.

For this topic, I'll try to outline the main tips for creating intervals in emails.

Before we start, I would like to remind you that creating a new email requires effort, time, and creativity. So that all your work is not useless, be sure to test your email templates before sending them to recipients to be sure that the template will be displayed on all different devices and email clients exactly in the form in which you created it.

Use Cellpadding

The first option involves creating an interval between the cell wall and its contents. To do this, we use the cellpadding attribute. You can use it to determine the amount of space in pixels for your HTML table.

cellpadding="23"

Cellpadding is supported by almost all email clients; however, I recommend using it only if you don't need to change it for different devices and email clients because it is an HTML attribute, not a CSS code, and it can't be redefined using media queries like in the case of CSS (heights, padding).

Use Padding

This attribute is often used in web development. It is especially useful for HTML email coding. The advantage of using this attribute in HTML mail development is that it can be redefined in the message header. Using this method, media queries can be used to switch 60-pixel padding for desktop computers to 20-pixel padding for mobile devices. This is a very important tool to optimize your template for viewing on mobile devices.

style="padding: 20px;"

I recommend using this method whenever you need dynamic filling. It is ideal for spacing.

Use Empty <td> tags

You can use this method if you need to add space around the content. <td> is used to change the height between table cells. You won't be able to use this method often. It doesn't always work, because empty cells don't always keep their height. In addition, to use this method, you will need to write a large amount of code to structure the table.

<table border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td colspan="3" height="15"></td> 
  </tr> 
  <tr> 
    <td width="20"></td> 
    <td align="left" style="font-size: 15px; color: #000002; font-family: sans-serif;"> 
      Place for your content  
    </td> 
    <td width="20"></td> 
  </tr> 
  <tr> 
    <td colspan="3" height="20"></td> 
  </tr> 
</table>

Another problem in use is mobile optimization. Creating new classes to control the width and height of these interval cells is an unpleasant task that you will need to complete in order to use <td> to create email for mobile devices.

Use Breaks

The easiest way to add space to your HTML email template is to use the <br> tag. But I want to make it clear that it is only used to create an interval between text elements. The <br> tag is used both before and after the content.

<img src="https://placehold.it/600x100" style="display: block;" border="0"> 
<br><br>
Content goes here
<br><br>
And here

Unfortunately, different email clients display line breaks differently. This is why it is difficult to create a perfect pixel HTML email using this method.

Use Margin

Margin is a common method in web development for adding intervals and is part of the CSS box model.

Margin works by adding an interval outside the HTML table border (as opposed to padding, which adds space inside).

style="margin: 20px;"

Given the complexity of this method, it is rarely used in email creation.

All these tips will help you work with a spacing in your templates. But don't forget, even the smallest changes in the code of your emails can ruin the entire design. Check your email, make a preview of your HTML email templates using features in free email builder Email2Go. Only after that, after making sure that your newsletter looks good on all email clients and devices, you can safely click the 'send' button.

Related Articles