How to Fix Image Padding and Spacing in HTML Emails
Have you ever noticed the small spacing below images in Outlook.com and Gmail? It can be frustrating and is very noticeable if you are splicing images in emails. Years ago, we spent a lot of time trying to figure this out. Finally, we realized that the DOCTYPE was the culprit for this pesky image spacing issue in HTML emails.
What we found even more interesting was that the latest DOCTYPE for HTML5 causes the same issues. Thankfully, there are a few workarounds you can use to get rid of the image padding and spacing issues in HTML emails.
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:
- absmiddle
- middle
- left
- right
- absbottom
- texttop
- top
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.
For example:
<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.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.
