What is the simplest vertical spacer in Outlook (HTML email)?

user_1253298 0
Viewed 344

What is the simplest vertical spacer in Outlook (and supported everywhere else)?

I have two elements, one on top of the other, both with display:block. I would like to space them without wrapping either in a table. I want a spacer that I can reuse anywhere with only simple adjustments to its height. I need to be able to set it to specific pixel heights. I also need to be able to override the height with a media query to make it responsive.

<div>test1</div>
<!-- Something here with reliable/succinct height/spacing -->
<div>test2</div>

Part of the goal is to avoid splitting things up into table cells every time we need vertical gaps, since that tends to add other complexities even aside from code bloat (bad for email).

html-email outlook css email html
4 Answers

The simplest if it's next to the table edges is to add padding to the <td> element:

<td style="padding:20px 0;">

But within a table cell, the simplest is to use a <p> element with margin:

<p style="margin:20px 0;">

Remember to always specify margin top and bottom on the paragraph because there are defaults. I am assuming you already use a <p> so it's got content after this. (So, don't use <p>&nbsp;</p> like another post says - the height will vary across email clients. And some email clients remove all <style> blocks, such as Gmail IMAP.)

In the case that you do not use a block level element and you want something standalone (that would be odd), you could use a <div> and specify line-height and font-size:

<div style="font-size:30px;line-height:30px;">&nbsp;</div>

For comparison, if we were to use a <p>, we'd have to write something like this, because <p>'s have a default margin that you have to reset, so is slightly more words than a <div>:

<p style="font-size:30px;line-height:30px;margin:0">&nbsp;</p>

(Or margin:30px 0 0 0;font-size:0;line-height: 0; which may be arguably 'simpler')

user_89425660

In email development, you'll always want to use tables for cross-client consistence. Reset all base styles and use height/width for spacing.

<table style="margin: 0;padding: 0;border-spacing: 0;overflow: hidden;background-color: #ffffff;" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody style="margin: 0;padding: 0;">
        <tr style="font-family: Helvetica, sans-serif;font-size: 100%;margin: 0;padding: 0;">
            <td style="font-size: 0;margin: 0;padding: 0;height: 24px;background-color: #ffffff"></td>
        </tr>
</table>
user_61139020

For a application specific spacer you could use:

<p>&nbsp;</p>

Outlook is quite respectful of common css styling so you could simply use height attribute on any element or class I use the pre tag in this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    pre {
      height:40px;
    }
  </style>
</head>

<body>
  <h1><%Header%></h1>

  <%Body%>
  
  <div>Line 1</div>
  <pre>&nbsp;</pre>
  <div>Line 2</div>

</body>
</html>

I would avoid using margin and padding as its very sporadic across different email clients.

But the most compatible way I've found to maintain spacing across all email clients is sadly still with tables.

user_21202610

I've found this consistent. I use a div with line-height:50px;. Changing line-height predictably/consistently changes the amount of spacing in MS Outlook 2016 on up and every other newer client. Contrary to @Nathan's answer, I do not see any inconsistencies by omiting font-size. I am using this in production, and we test in Litmus. I will update this answer if I find an issue. Please let me know if you find a problem.

<div style="line-height:50px;">&nbsp;</div>

I would love to see more/better solutions to this question. My team and I need a goto solution to become the standard.

user_12532980
Related