How to Fix Image Padding and Spacing in HTML Emails
This post was updated on May 9, 2018. It was originally published in December 2010.
Have you ever noticed the small spacing below images in Outlook.com and Gmail? Every browser renders this spacing except for IE 7 and lower. After lots of hair pulling, we realized that the DOCTYPE was the culprit for this pesky space issue in HTML emails.
What we find even more interesting is that the latest DOCTYPE for HTML5 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, there are a few workarounds we can use.
While these workarounds may fix the spacing issues, it’s still important to test your email – you never know what other design bugs you’ll find. With Email on Acid, you can see what your email looks like on more than 70 email clients and devices before you hit “send.”
Which DOCTYPES Cause Spacing Problems?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>
What the Spacing Problems Usually Look Like
How to Get Rid of the Extra Space
There are a several code changes and workarounds you can use to fix the space issue in Outlook.com and Gmail emails:
Add style=”display:block” to Your Image
This is the most popular fix for extra padding and space. However, as you can see below, it creates 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 because Gmail does not support embedded or linked style sheets.
Here’s an example of this code in action:
<img src="https://www.test.com/test.jpg" style="display:block">
Set the “Align” Attribute
If your image height is greater than 16px, set the image’s “align” attribute to any of the following:
It’s important to note that align=”baseline” and align=”bottom” do not work.
Check out the code examples below to see how this fix works:
<img src="https://www.test.com/test.jpg" align="absbottom">
Set Line-Height to 10px or Less
For this solution, simply place the image in a block element with a style=”line-height:10px” (or less).
Here’s an example:
<div style="line-height:10px"> <img src="https://www.test.com/test.jpg"> </div>
Set Font-Size to 2px or Less
Similar to the line-height solution, this fix places the image in a block element with a style=”font-size:2px” (or less). This is an option if you don’t have any text in the container.
<div style="font-size:2px"> <img src="https://www.test.com/test.jpg"> </div>
Use Float:Left or Float:Right
Both Gmail and Outlook.com 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.
For this solution, add style=”float:left” OR style=”float:right”.
Here’s an example:
<img src="https://www.test.com/test.jpg" style="float:left">
How to Fix Spacing if Your Image is Less than 16 Pixels High:
Unfortunately, not all these solutions will work if your image is smaller than 16px high. If you find yourself with a smaller image, use these fixes:
- Add style=”display:block” to the image
- Add align=”left” to the image
- Add align=”right” to the image
- Add style=”float:left” to the image
- Add style=”float:right” to the image
- Place the image in a block element with a style=”line-height:10px” or equal to the image height
- Place the image in a block element with a style=”font-size:2px” (or lower)
Hopefully, at least one of these workarounds will help you out, but if you know of any additional fixes, don’t hesitate to share it in the comments section below. Or, you can hit us up on Facebook or Twitter.
Spacing Issue or Not – Don’t Forget to Test!
These workarounds may help you fix some spacing problems, but even the slightest code change could throw off an entire email design. That’s why it’s important to test every email every time. With Email on Acid, you can preview your design on more than 70 clients and devices, so you know how your email will look before it hits the inbox. Try us free for 7 days and see for yourself.