I'm designing an email, and only in Gmail the height of my TD is actually larger than the set height attribute.

Here is the deisgn - which looks fine rendered in Safari or other browser.


Here is a screen of Safari inspector in Gmail which renders the layout with spaces between each row alt text

Notice the height attribute and the actual height being rendered by Gmail.

3 answers

This was chosen as the best answer

The issue is that Gmail has a doctype that sets browsers to render in Standards Mode rather than Quirks Mode, like many other e-mail clients. One of the differences in Standards Mode is that an <img> tag's display property defaults to "inline" and the whitespace around it is considered to be text around the image. The problem this creates is that if your image is squeezed by the table from the left and right side, the spaces move to the bottom.

One solution is to use CSS to set the display of images to 'block'. Since e-mail clients typically wipe blocks, you'll need to use inline styles. Try this:

<img width="611" height="26" style="display: block;" alt=""/>

See if that doesn't fix it.

Answered about 7 years ago by Eugene Zaretskiy
  • Campaign Monitor explains the issue. http://www.campaignmonitor.com/blog/post/3132/how-to-stop-gmail-from-adding-a-margin-to-your-images/?utm_medium=email&utm_source=Emailmarketingsoftware&utm_content=709686863&utm_campaign=MayNews-VersionB&utm_term=stopGmailfromaddingmarginstoimages Richard Testani about 7 years ago
  • I just want to go on record as saying that I've had this problem toothe same emails I was sending a month or two ago have RECENTLY started having spacing issues in Gmail, despite having worked before, and working everywhere else. Thanks for that link! Glad to discover I'm not the only one. Nobody seemed to know what I was talking about. Ben Saufley about 7 years ago

Gmail is neither a browser nor a rendering engine, so I'm going to have to guess that it's adding markup, styling or a doctype other than that which is on your static page. At least, I would hope that all those class and ID names were randomly generated by something that wasn't human.

Answered about 7 years ago by Nathan Duran

well, since it's gmail, the layout in question is inside Gmail layout which is all those classes and ids. Only where the table starts is my layout.

Gmail however is an email application, and does have it's own rendering capabilities even within the browser (which I know Gmail is not)

I wasn't sure if anyone had come across this issue because I cannot seem to troubleshoot it.

Answered about 7 years ago by Richard Testani
  • So Gmail is a web application that renders itself? Why haven't they published anything about this anywhere? Nathan Duran about 7 years ago
  • Why would some CSS be supported, and not others --http://www.campaignmonitor.com/css/ and http://www.email-standards.org/clients/gmail/ -- Gmail definitely has its own way of displaying emails. Likely for some consistency in browsers. Richard Testani about 7 years ago
  • If by "its own way" you mean they strip &gt;style&lt; tags, that's not all that strange. It just means you have to use inline styles, which is annoying, but it's not like what they're doing is so strange and mysterious. Just annoying. Eugene Zaretskiy about 7 years ago