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