Email

Why are margins and padding around my image not rendering in Outlook?

Last updated: July 27, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

Outlook does not support some CSS properties, such as margins and padding, when applied to certain elements, including <img> and <div>. Here is a full list of CSS support by email client. Any margins created within the rich text modules in email will work in most major clients except for Outlook.

To adjust spacing for an image, you will need to access the Source Code of each applicable rich text module in your email. While all of these methods may work to create spacing between your images text in Outlook, keep in mind that there is no true replacement for margins and these workarounds will each have their own nuances.

Please note: these methods require basic HTML knowledge.

  • Navigate to Content > Email > click on the name of your email.
  • Click the rich text module that includes your image to make edits, then click the Source Code icon.
User-added image
User-added image

Method 1 - Use hspace or vspace

  • 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, where a larger number translates to more spacing.
User-added image
hspace defines horizontal space and will add equal spacing to the right and left side of your image.
  • vspace defines vertical space and will add equal spacing to the top and bottom of your image.
  • hspace defines horizontal space and will add equal spacing to the right and left of your image.

Method 2 - Use a table

  • Create a 3 column table to contain your image, spacing, and text by clicking on Table > Insert Table within the email rich text editor.
User-added image
User-added image
  • In the Source Code of the table 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.
  • In the Source Code of the table 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.
  • You can also combine tables with the hspace/vspace method.
User-added image
User-added image

Was this article helpful?