Skip to content

Marketing emails look different in Outlook

Last updated: September 25, 2024

Available with any of the following subscriptions, except where noted:

Marketing Hub   Professional , Enterprise
Content 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.

Learn more about email design on in the HubSpot Designers Community

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 > Marketing Email.
  • Hover over the name of the email with a custom coded template, then click Edit.

  • Click into the content module.

  • 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 > Marketing Email.
  • In the rich text editor toolbar, click Insert > Table. Create a 3x1 table.

    insert-table-in-classic-marketing-email-editor

  • In the rich text editor toolbar, click Advanced, then select 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

Troubleshoot unexpected horizontal lines appearing in your email

Due to a known bug in some versions of Outlook, a horizontal line may appear between sections in your email. While there isn't a consistent way to fix the issue, you can try the following troubleshooting steps:

ms-text-size-adjust: none; mso-line-height-rule: exactly;

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.