Click to Sign Up for a 7 Day Free Trial!

Email Development

12 Fixes for Image Padding & Spacing in HTML Emails

Email On Acid

Have you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail's Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE.

What I find even more interesting is that the latest DOCTYPE for HTML 5 causes the same image spacing issues! Because of this we might see browsers like Firefox, Safari, Chrome and Opera come out with an update in the near future. Until then, welcome to the party web developers.

The following DOCTYPES cause the spacing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

Examples before any fixes:

Below are some options for correcting the issue.

Option 1.) Add style="display:block" to your image

Example:

<img src="http://www.test.com/test.jpg" style="display:block">

This is the most popular fix but as you can see above, it causes a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image (like the example above) because Gmail does not support embedded or linked style sheets.

Options 2-8.) If your image height is greater than 16px, set the "align" attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top

Example:

<img src="http://www.test.com/test.jpg" align="absbottom">

Note: align="baseline" and align="bottom" do not work. Keep reading if your image height is less than 16px.

Option 9.) Place the image in a block element with a style="line-height:10px" (or lower)

Example:

<div style="line-height:10px">
<img src="http://www.test.com/test.jpg">
</div>

Option 10.) Place the image in a block element with a style="font-size:2px" (or lower)

Example:

<div style="font-size:2px">
<img src="http://www.test.com/test.jpg">
</div>

Obviously, this is only an option if you don't have any text in the container.

Option 11 & 12.) Add style="float:left" OR style="float:right"

Example:

<img src="http://www.test.com/test.jpg" style="float:left">

Both Gmail and Hotmail support the float property. Again, if you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets.

If your image is less than 16 pixels high:

Only seven of the above fixes will work:

  1. Add style="display:block" to the image
  2. Add align="left" to the image
  3. Add align="right" to the image
  4. Add style="float:left" to the image
  5. Add style="float:right" to the image
  6. Place the image in a block element with a style="line-height:10px" or equal to the image height
  7. Place the image in a block element with a style="font-size:2px" (or lower)

Hopefully at least one of these work-a-rounds will meet your design requirements. If you are aware of additional fixes, don't hesitate to share it below!

About the Author

Michelle Klann

Michelle Klann

A Jackie of all trades, Michelle (aka Miki) specializes in design and has been known to knock down some pretty nifty, object oriented, JS applications. Mozify, anyone?

Join the Discussion

Thank you for this complete list of possible fixes.

All of this is no mystery at all. You won't believe it, but it's the W3C defined standard way of rendering images within table cells (on the baseline of the text)!

You will always get that spacing with any Doctype that causes your Browser to display a Document in a standard / strict (as opposite to the "quirks" or so called "almost standard") mode because images have to be displayed this way accorging to the W3C standard. You can see the following list for a full list of Browser / Doctype combinations:

http://en.wikipedia.org/wiki/Quirks_mode

Every Doctype that triggers a green "S" rendering mode will cause those problems and thus there are many more Doctypes than the two mentioned in this article, that cause this "problem".

Thanks again for your article and the nice examples.
Christian
Great! Thanks for this. I didn't know about the "block:" thingy. This will be really helpful for my websites design, Thank you!
proactol reviews
Hi Michelle,

Thanks for this article, it was great help to me!

Best regards
Sanj
Sanjay Mistry
Thanks for sharing such a useful stuff!
full tilt
berferol
great article, though nothing worked.
schmeisser
Cute little ghost smile
Sami
Thank you for sorting it out,

It happens with html5 <!doctype html> as well, the workarounds the same
dholly
Thanks for the great info. 'display:block' did the trick.
John K
nothing working in my case :(
tdebon
Hi Tdebon,

Send me your files to: sanj (@) innov8graphics (dot) com

Let me know what the problems are and I'll happily take a look.

Email - remove (@)and (dot)

Thanks
Sanj
Sanjay Mistry
I'm not sure if this fits into this at all but I would appreciate some help. I have designed some craigslist ads using slices and suddenly they started having mysterious line breaks out of nowhere. This just happened yesterday. I tried using the style="display:block" to no avail. Craigslist must have done some type of system update that is preventing the slices I used to use. Anyone have a fix for this?

I appreciate any help.
Justin
Fixes does not work for me anyone tested?
webmaster
tested, they all worked just fine
yaya
THANKS!! IT WORKS!!
Adrian
You are responsible for my future sanity. Thank you, thank you, thank you!
Jaco
The details about the spacing between images in hotmail and Gmail were really interesting and informative. The DOCTYPES causing spacing given here was helpful to solve this issue of image spacing. Keep posting more of these sought of technical updates in future also.
Johan Peter
I tried every suggestion, and none of them work. Hotmail, gmail and yahoo mail all render the email with spaces between images. I'm doing a simple test - a table with three rows, in those three rows a single image. Every email client adds a white space between the images, and the above 'fixes' didn't work for me at all.
Chris
Really thank you for your fantastic post but even if I tried with ALL this trick I still have space in Gmail (top and bottom) for each table cell with an image. Please help me I'm desperate!

Few info about my problem:

the DOCTYPE is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >

I have already added the style="display:block;" inline in the image but nothing happens!
Daniela
Dear all
I have a problem as this issue and i had fixed. I share my code in here:
<tr style="margin-bottom:0">
<td align="left" valign="top">
[url="http://www.tripadvisor.com" target="_blank" style="display:table-caption; vertical-align:text-top"]
images/image.jpg
[/url]
</td>
</tr>
danglong
Thanks for this great post! This totally saved me. Just to make it extra bullet-proof I included float:left as well as display:block.

Also, for everyone still having problems, it helps to also specify exact widths and heights for all your images and widths for all your table cells.
Catherine
Things have changed. Now the problem above is with Gmail and Yahoo, and adding "img { display:block; }" to a style block in the header works, as Yahoo seems to ignore the inline styles, or somehow overrides them.

On a related matter, Hotmail (now Outlook.com) strips all styles off images, such that floating an image results in the image either inline or on a line by itself. I tested adding align="right" to the img tag and this worked.
Michael Muller
Thank you for your blog article. Great. cdeeadgfefdd
Johne221
Thanks for the info. Display:block has always worked for me in the past, but I'm testing a client email that looks fine in my Litmus tests (Gmail Chrome/FF/IE), but when I view the email actually using Gmail Chrome, I'm getting the bottom-margin space. This doesn't happen in FF or IE.

I tried all of the above. I tried removing any white space around the img, td, tr. I tried <tr style="margin-bottom:0">, I tried adding margin:0 to image, and padding:0 to <td>.

I haven't tried it on another machine yet, so it could be something with the chrome install on my particular computer, but that seems unlikely.
Troy Thibodeaux
Just a follow up on my particular situation. I opened the email in question on another machine with the same OS, same browser, etc and I did not see the bottom margin gap, so must be something on my machine.

Thanks again for all the info.
Troy Thibodeaux
The only solution that *finally* worked for me was to create the email in xhtml 1.0 strict doctype, and remove the width= , height= and align= attributes from the image tag, replacing them with the css inline attributes height: width:... I kept the display:block and kept all the cell attributes/table attributes as originally built.
Regina Santos
Thank you so much for this! I had been looking everywhere for a solution over the past couple of days. What finally worked for me for gmail was adding absbottom to each of my images inside a block level div.

i.e. <div style="display: block;">page1.pngpage2.png</div>


Am using them for top navigation.


Sincerely,

Wes
Wes
Thank you, this was SUPER helpful (even though it's years old)!
maria
Thanks a lot Michelle!!
The code <div style="line-height:10px"> modified to <div style="line-height:9px"> closed the gaps for me wink)
Kind regards
Ole
Ole Lund Andersen
Thanks for this solution. this is helpful for me...
Jey Ganesh
Thanks so very much, totally worked!!
leta martin
align="absmiddle" was perfect for my little inline icon image!
Brent Carter
I've been searching for this solution for years, it's just worked!

It's worked in Mailchimp, but not ClickDimensions btw.
Lee
I can never remember all the tricks. I thought I was going to have to search for a while. But, happily this article got right to the root of my issue. Thanks!
Lena Shore
Thanks a lot for your tips! Been trying for the past hour trying to get rid of the pesky white space.
Hunny
Thanks, you saved me a big headache.
madesimplemedia
Thanks very much for the info! style="display:block" worked a treat when I had gaps in a 2 row table when building a Mailchimp template. It saved me a lot of frustration!
Chris
One of your fixes works.
Thanks.
Hims
Thanx........ thanxxxxx.... very very thaaaaaaaanxxxxxxxxxx.... its very useful....
sathunlk
None of this is working for me! It's weird! Gmail removes all the piece of code you mention.
I've received an advertising newsletter from my bank and it had no gap. So I copied the code and try to send the same newsletter to me, and it added gaps! How come that happened? It was the same code that the bank used. How is it possible that gmail adds the gaps when I sended it but not when the bank sended it?
I would be pleased if anyone could help... I'm going crazy!
Lorena
Lorena,
without looking at the code, it's hard to say. It sounds like your sending service may be making changes to the code that the bank's sending service didn't make. You may want to try testing your raw code in our system vs. testing by sending to your autoprocess address. This will help you pinpoint changes to your code made by your ESP.
Geoff Phillips
But what about when image is inside link? In outlook 2007 when 'img' is inside 'a' there is empty space below, no mater how I style 'img' and 'a'. Does somebody konow fix for this?
Grzegorz Brzeczyszczykiewicz
A couple of weeks ago, out of nowhere, the responsive email template I created and have been using for almost a year began experiencing this issue but only in Hotmail (Outlook Mail).

I tried the first several recommendations here with no luck. Finally, the suggestion of adding style="line-height:10px" worked, only I added it to the <td> containing the image rather than adding a div.

Thank you so much for this list!
Jamie
Thanks!! It worked great...
Aditya

Leave a Comment