Custom coded marketing emails look different in Outlook

If you created a custom coded marketing email, you may notice discrepancies in the way your email renders in Outlook, such as positioning or spacing issues.

Resolve spacing issues

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

Use 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.

1. In your HubSpot account, navigate to Marketing > Email.
2. Click name of the drafted email using a custom coded template.
3. In the email editor, click the module you want to edit.
4. In the rich text toolbar, click the Advanced dropdown menu and select Source code. 
5. In the dialog box, add hspace="10" vspace="10" at the end of the image code. Replace 10 with the desired amount of spacing.

Use tables

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

1. In your HubSpot account, navigate to Marketing > Email.
2. Click name of the drafted email using a custom coded template.
3. In the email editor, click the module you want to edit.
4. In the rich text toolbar, click the Insert dropdown menu and select Table, then create a 3x1 table. 

5. In the rich text editor toolbar, click the Advanced dropdown menu and select Source code.

6. In the dialog box, add a width for the empty cell, such as <td width="10">, to set the space between image and text. 
7. Set a font family, size, and color, as well as line height, since Outlook will add its own styling when unspecified.

Troubleshoot unexpected horizontal lines

• Set the background color of your email to be the same as its body color.
• Update your content's font size and line height to be even numbers.
• Add the following CSS styles to the head section of your email template: