Gmail显示图像之间的差距 [英] Gmail displaying gaps between images

问题描述

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

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

这里直接从收到的电子邮件中粘贴：

 < 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; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; shape =rect>< img alt =购买门票border =0height =55src =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-4BBF04F14E92style =margin：0pt; padding：0pt; shape =rect>< img alt =Three Stages Presentsborder =0height =182src =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-9B9FF6A87D03style =margin：0pt; padding：0pt; shape =rect>< img alt =三阶段合作伙伴border =0height =181src =https://wserver.flc.losrios.edu/~vapa/email/20110203_partners。 jpgstyle =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-F03E619E59CAstyle =margin：0pt; padding：0pt; shape =rect>< img alt =三阶段制作border =0height =176src =https://wserver.flc.losrios.edu/~vapa/email/20110203_productions。 jpgstyle =margin：0pt; padding：0pt; width =180>< / a>< a href =http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-高踢球/形状=rect>< img alt =全国巡回演唱会A合唱系列 - 在三阶段2/11开幕 - 接受狂欢border =0height =134src =https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpgwidth =180>< / a>< a href =http://www.nytimes.com/2011/01/13/books/13book.html?_r=2shape =rect>< img alt =Rosanne先生Cash =180>< ; / a>< a href =http://www.archive.org/details/Insight_080403_ashape =rect>< img alt =与KXJZ的Insight& （他是演出的第二位客人），最初于2008年4月录制。 border =0height =68src =https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpgwidth =180>< / a>< a href =http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482shape =rect>< img alt =自己的事故发生二十年后，幻影剧院的斯宾塞（Kevin Spencer）向孩子们传授魔术，作为治疗。border =0height =81src =https：//wserver.flc.losrios。 edu /〜vapa // email / 20110203_three_bits_4.jpgwidth =180>< / a>< a href =http://www.facebook.com/pages/Three-Stages-at-Folsom- Lake-College / 169056696438709style =margin：0pt; padding：0pt; shape =rect>< img alt =在Facebook上关注我们border =0height =92src =https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook。 jpgstyle =margin：0pt; padding：0pt;宽度= 180 >< / A> 
  

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

任何建议？

解决方案

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

  style =display：block
  

提示：
广告系列监视器是一个很棒的资源， MailChimp 也是一个很好的资源。两者都提供几个指南，模板示例等。

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

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 Cash’s new memoir" 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 kidsâ€"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.html It's the left column that Gmail is showing gaps on.

Any advice?

解决方案

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:

style="display:block"

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

这篇关于Gmail显示图像之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！