HTML email tips and tricks for Gmail and Google Apps

1. How to fix line spacing in Gmail?

This is due to the Gmail DOCTYPE, and it occurs more frequently at smaller font sizes. Instead of using a font or a span, try putting your font inside a paragraph tag. Another option is to set a line-height and/or font-size in the contained td> element.

2. How to fix the small space under all images in Gmail?

The Yahoo! DOCTYPE is to blame for this empty space. Here are a couple workarounds (which also apply to Gmail and Outlook.com):

1) To the image element, apply the display:block style.

2) In the image element, add align=absbottom.

3) To the picture element, add align=texttop.

4) To the containing TD, add line-height:10px or lower.

5) To the containing TD, add font-size:6px or lower.

3. How to know embedded CSS isn't supported in Gmail?

The simplest solution is to use our "Inline CSS" conversion tool on the summary screen of each test result to convert your embedded CSS to inline CSS.

4. How to fix margins and padding negative values in Gmail?

If the value is negative, Gmail ignores the entire margin or padding declaration.

The generic padding property in Gmail accepts negative values. This isn't a good idea, though, because Yahoo doesn't allow negative values.

5. How to fix background images in Gmail?

Your entire declaration will be ignored in Gmail if your background style includes any reference to a URL.

For example

If you wish to use a colour to complement your background image, make sure to do so in a separate inline CSS declaration.

For example

Another alternative is to use the td"background" >'s attribute.

6. How to stop addresses and phone numbers converting to links in Gmail?

Yes, if you don't have a link for a URL or email address, Gmail will add one for you. Within this paragraph, for example, [email protected] will be converted to:

Here are two possible fixes:

1.) Use an HTML entity that Gmail doesn't understand, such as:

So, instead of [email protected], use:

www.mydomain.com should be replaced with:

2.) Wrap the URL or email address in an anchor and format it like the rest of your content. Consider the following scenario:

7. How to write a "display" property for Gmail?

If the value of the inline display attribute is set to “none,” Gmail does not support it.

Each of the other display property values is supported.

It's worth noting that if the value is set to "none!important;" as seen below, Gmail will support the inline display feature.

8. How to fix vertical spacing in Gmail?

Gmail converts this:

In response to this:

In td>s, the min-height attribute has a different effect than the “height” property. The problem is solved by inserting a space or a br /> inside the empty cell.

9. How to fix email clipping in Gmail?

If your email is longer than 102K characters, Gmail will show the first 102K characters along with the message: [Message cut off] View the whole message Your email will open in a new window when the user clicks to view the complete message. If you're near to 102K, remove any superfluous spaces, carriage returns, or comments to save a few bytes. When sending HTML emails, we recommend avoiding embedding images or documents.

10. How to apply CSS position property in Gmail?

“position:relative” and “position:absolute,” as well as “left:,” “top:,” and other positioning code, are stripped from inline CSS in Gmail. This is due to the fact that positioning may cause components of the email to stray outside of the viewing window.

11. How to fix overlapping email to the right column in Gmail?

You may occasionally encounter an email that appears to be dangling off the right side of the frame when viewing broad emails. We purposely adjust the client's styles in our web client previews (Yahoo! Mail, Outlook.com, AOL Mail, Gmail, and others) to allow your complete email to be shown even if it is wider than the viewing pane. We do this because we can't possibly account for all of the different email widths that might be sent through our system. No, this isn't precisely how it would appear in the live client, but it does allow you to see the entire email as well as how much of it would require horizontal scrolling. In a browser window of that size, the part of your email that overlaps the right column would ordinarily be hidden.

12. How to fix Images showing in Gmail?

Spaces are not allowed in image paths in Gmail. Use underscores or dashes whenever possible.

If it doesn't work, double-check that you're utilising absolute image references.

If it doesn't work, Gmail might be having issues with your Hypertext Transfer Protocol Secure (https://) references. If this is the case, consider switching to HTTP.

13. How to fix blue links and underlined in Gmail?

The default colour for Gmail links is #1155CC. Inline CSS can be used to change the colour. Gmail, on the other hand, ignores #000, #000000, and "black" values. Consider the following scenario:

This will be displayed in red:

The default colour (#1155CC) will be used to render this:

To solve this, change the hex value to something close to black:

Links in Gmail are automatically underlined. Inline CSS can be used to override this style.

Consider the following scenario:

The following will be rendered with an underline:

This will look like this without the underline:

14. How to fix background getting cut off in Gmail?

Your body in Gmail is converted to a DIV. This is critical because if you don't define a width in your body, Android will set the width of your converted body tag to the width of your viewport (horizontal or vertical). If your email's body contains a background colour or image, you have a few options:

1.) Put your email's contents in a table or div with the width set to the width of the widest element in your layout.

2.) In your body, add an inline CSS width style:

The disadvantage of this technique is that your email will now be left aligned in the web-based Gmail client, and the background colour will not extend to the left/right.

IMPORTANT NOTE: In either of these selections, you must use the characters ‘px', ‘em', or ‘pt' — percentages will not work.