Have you ever noticed the small spacing below images inOutlook.comandGmail? 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 totest your email– you never know what other design bugs you’ll find. WithEmail 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 witha 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 andOutlook.comsupport the float property. Again, if you are working on an HTML email, this fix must be done inline for each image becauseGmail 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 totest every email every time. WithEmail 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.
Do More in Less Time with Email on Acid
Stop switching back and forth between platforms during pre-deployment and QA. With Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on the most popular clients and devices, you can confidently deliver email perfection every time.
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.
FAQs
How do I add padding to an email in HTML? ›
Using the <br> tag is the simplest way to add space in the email content when coded using HTML in email. This method can be used only to create spacing between the texts in the copy of an email and hence it is not used much. <br> tag can be used before and after the content.
Does padding work in HTML emails? ›It is advisable to take the help of HTML padding when you will not need to alter the spacing according to the different screen sizes. While padding is used to add spacing in a <td> cell, margin attribute goes well with <div> tags, when you want to add spacing to <div> elements. .
How do I change the padding of an image in HTML? ›- Click Edit.
- Switch to HTML Editor.
- Locate the HTML code for the image(s) you'd like to adjust. ...
- Locate the image's style attribute; if the image doesn't have one, you can add one by typing style="" after img.
- Within the quotation marks, add padding: 10px; .
The <input type="email"> defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute. Tip: Always add the <label> tag for best accessibility practices!
How do you fix spacing in an email? ›Select the paragraph you want to change, or press Ctrl+A to select all text. Go to Home > Line and Paragraph Spacing. Select the line spacing you want.
What is the HTML code for padding? ›Here is the code without the shorthand property: padding-top: 10px; padding-right: 30px; padding-bottom: 10px; padding-left: 30px; HTML.
How do you manage padding in HTML? ›To change the padding of a HTML Element using JavaScript, get reference to this HTML Element, and assign required padding value to the element. style. padding property. In the following example, we will change the padding of HTML Element with id "myElement" to "20px" , in JavaScript, using element.
How do I make an image fit into an email? ›- Click on the image to open the toolbar, then click Replace.
- Click Edit.
- Click the Transform icon.
- Check the "Lock Resolution" box.
- Change the width to something smaller than 480 pixels. ...
- Click Export.
- Click Insert.
You need to either retype your HTML code in upper case: <IMG SRC="MY_IMAGE. GIF"> or you need to rename the file on the server to lower case to coordinate with the HTML page. It is possible that your image files were uploaded correctly to the server, but the server's path to the image is incorrect.
Why do my emails have extra spaces? ›This effect is caused by the HTML coding and is most frequent for recipients using a web-based email client, such as GMail. This is because of the way Outlook creates line breaks in HTML and how browsers or other clients interpret them.