Have you ever made an HTML email with images in it and it looked good in most email clients, but not gmail or possibly hotmail?

You’ve made sure to build your HTML email using tables instead of divs, used colspans, specified heights and widths. But…the images still separate in gmail.

GMail adds margins to images that are displayed inline. So simply make the styling for the image display: block;

Inline Images in HTML Emails

The code for the image will look something like this when you put images in your HTML email.

<img src="NickIsCool.jpg" style="display: block;" /> 

This is actually a great reminder to myself. I so often forget to add display: block; when building my own HTML Emails. I even forget that adding display: block; to images is what fixes it (most of the time).


Please enter your comment!
Please enter your name here