Html Gmail 显示图像之间的间隙

Gmail displaying gaps between images

提问by jerrygarciuh

Building an overly fancy HTML mail for a client. Code validates at http://validator.w3.orgas XHTML 1.0 Transitional by direct input. Thing is Gmail displays gaps between each of the images.

为客户构建一个过于花哨的 HTML 邮件。代码在http://validator.w3.org 上通过直接输入验证为 XHTML 1.0 Transitional。事情是 Gmail 显示每个图像之间的差距。

Each image and its anchor have inline styles setting padding and margin to zero. There is no whitespace between the anchor tag and the enclosed image tag or between subsequent anchor tags. There are no newlines in the code.

每个图像及其锚点都有内联样式，将填充和边距设置为零。锚标签和包含的图像标签之间或后续锚标签之间没有空格。代码中没有换行符。

Here it is pasted straight out of the received email:

这是直接从收到的电子邮件中粘贴出来的：

<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&amp;sessionlanguage=&amp;menu_id=007F7A77-97DB-4601-9691-CB7AA4ED7950" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Buy Tickets" border="0" height="55" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_buy_tickets.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Three Stages Presents" border="0" height="182" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_presents.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Partners of Three Stages" border="0" height="181" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_partners.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Productions of Three Stages" border="0" height="176" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_productions.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/" shape="rect"><img alt="The national tour of &quot;A Chorus Line&quot;--opening at Three Stages 2/11--receives a rave review in Ventura. " border="0" height="134" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpg" width="180"></a><a href="http://www.nytimes.com/2011/01/13/books/13book.html?_r=2" shape="rect"><img alt="Mr. Rosanne Casha?s new memtheitroad" border="0" height="44" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_2.jpg" width="180"></a><a href="http://www.archive.org/details/Insight_080403_a" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ's &quot;Insight&quot; (He's the second guest on the show). Originally recorded April, 2008." border="0" height="68" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpg" width="180"></a><a href="http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 " shape="rect"><img alt="Twenty years after his own accident, Kevin Spencer, of Spencers Theatre of Illusion teaches magic to kidsa”as therapy. " border="0" height="81" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_4.jpg" width="180"></a><a href="http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Follow us on Facebook" border="0" height="92" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a>

Here is the complete document. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.htmlIt's the left column that Gmail is showing gaps on.

这是完整的文档。 https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html这是 Gmail 显示空白的左栏。

Any advice?

有什么建议吗？

回答by mahalie

The specific answer to your question is that Gmail adds extra space to table cells which only contain an image. To fix this issue add to these images:

您问题的具体答案是 Gmail 为仅包含图像的表格单元格添加了额外空间。要解决此问题，请添加到这些图像：

style="display:block"

Tip:Campaign Monitoris a great resource, as is MailChimp. Both provide several guides, template examples, etc.

提示：Campaign Monitor是一个很好的资源，MailChimp 也是。两者都提供了几个指南、模板示例等。

回答by Jon

For any image in its own table cell, use display: block and line-height: 50%

对于其自己的表格单元格中的任何图像，请使用 display: block 和 line-height: 50%

<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />

Set the padding to 0 and margin to 0, although setting margin to -1px might fix small gaps on iPhone/iPad.

将内边距设置为 0 并将边距设置为 0，尽管将边距设置为 -1px 可能会修复 iPhone/iPad 上的小间隙。

stick: <style type="text/css"> img{display: block;}</style>

戳： <style type="text/css"> img{display: block;}</style>

...within the body tag, not the head, as it'll get stripped out by some clients.

...在 body 标签中，而不是头部，因为它会被一些客户端剥离。

Don't get hung up on if your code validates, getting email templates working cross-browsers and clients results in some fugly code!

如果您的代码通过验证，请不要挂断电话，让电子邮件模板在跨浏览器和客户端上工作会导致一些模糊的代码！

P.S. Watch out for Outlook 2007 (it uses the Word rendering engine) and Hotmail on Firefox.

PS 注意 Outlook 2007（它使用 Word 渲染引擎）和 Firefox 上的 Hotmail。

回答by duncmc

Dunno if it's any help but there is a comprehensive guide to CSS support in the different email clients at www.campaignmonitor.com/css/

不知道是否有帮助，但在www.campaignmonitor.com/css/ 上有不同电子邮件客户端中 CSS 支持的综合指南

回答by morrisbret

In my html I have a lot of table cells which contain multiple images of the same height side by side. The problem with this technique turned out to be that I could not make my images display block since that would drastically mess up my layout. Turned out the solution for removing the gmail gap was to simply add style of line-height: 50% to the table itself. I tested in all browsers with positive results. To be honest, I'm not 100% sure why this works or if it will work in every case but if your situation is like mine, you might want to give this solution a try.

在我的 html 中，我有很多表格单元格，它们并排包含多个相同高度的图像。这种技术的问题是我无法让我的图像显示块，因为这会彻底弄乱我的布局。原来消除 gmail 间隙的解决方案是简单地将 line-height: 50% 的样式添加到表格本身。我在所有浏览器中进行了测试，结果都是肯定的。老实说，我不是 100% 确定这为什么有效，或者它是否在每种情况下都有效，但如果你的情况和我一样，你可能想尝试一下这个解决方案。

PS, thanks to @Jon and @Jason for giving me the idea.

PS，感谢@Jon 和@Jason 给我这个想法。

回答by Brett DeWoody

If you have a table cell containing only an image and you're still seeing the extra space beneath your images, the solution is to add line-height:0;to the table cell. For example, <td style="line-height:0;">.

如果您有一个仅包含图像的表格单元格，并且您仍然看到图像下方的额外空间，则解决方案是添加line-height:0;到表格单元格中。例如，<td style="line-height:0;">。

回答by Liko

If you do not want to use inline css, add align="top" and border="0":

如果不想使用内联 css，请添加 align="top" 和 border="0"：

`<img src="" width="100" height="100" alt="" align="top" border="0" />`

回答by Lauren

I know this is an older post, but this helped me, for anyone still looking: <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

我知道这是一篇较旧的帖子，但这对我有所帮助，对于仍在寻找的人： <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

Wrap your image(s) in a paragraph tag with margin, font-size, and line-height set to "0". I noticed that both Outlook and Gmail were adding erroneous paragraph, span, and font tags. Hope this helps someone else.

将您的图像包装在一个段落标签中，边距、字体大小和行高设置为“0”。我注意到 Outlook 和 Gmail 都添加了错误的段落、跨度和字体标签。希望这对其他人有帮助。

回答by Jessica Guerard

I fixed this issue by shudderusing Dreamweaver and using image maps. I would only suggest this if there is no other way, but it fixed my problem.

我解决了这个问题，通过不寒而栗使用Dreamweaver和使用图像地图。如果没有其他方法，我只会建议这样做，但它解决了我的问题。