Skip to content
Email

Marketing emails look different in Outlook

Last updated: April 2, 2021

Applies to:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

If you're using the updated classic email editor to draft your marketing emails, you may notice discrepancies in the way your email renders in Outlook, due to Outlook's limited support for CSS.

If you notice that email positioning or spacing looks wrong in Outlook, follow the troubleshooting steps below.

Please note: HubSpot Support cannot support custom coded email templates. If you're using a custom coded template, follow up with the provider who created the template. You can also connect with other HubSpot users and designers on the Community.

Spacing

There are two methods for adjusting spacing around images in Outlook: using hspace or vspace, and using tables.

Using hspace and vspace

The HTML attribute vspace defines vertical space and will add equal spacing to the top and bottom of your image. The hspace attribute defines horizontal space and will add equal spacing to the right and left of your image.

  • In your HubSpot account, navigate to Marketing > Email.
  • Hover over the name of the email, then click Edit.

  • Click into the content module, then click Advanced > Source code.

  • At the end of the image code, add either or both of the following code: hspace="10" vspace="10", replacing 10 with the desired amount of spacing.

source-code-hspace-vspace

Using tables

You can use a 3-column table to evenly contain your image, spacing, and text:

  • In your HubSpot account, navigate to Marketing > Email.
  • Hover the name of the email, then click Edit.

  • In the rich text editor toolbar, click Insert > Table. Create a 3x1 table.

    create-table

  • In the rich text editor toolbar, click Advanced > Source code..

  • Specify a width in the empty cell, such as <td width="10">, for the amount of spacing you would like between the image and text.

  • Specify a font family, font size, font color, and line height such as style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #000000" as Outlook will add its own styling when unspecified.

table-styling

Learn more about email design on our Designers Community