画像間のギャップを表示するGmail

Question

クライアントのためにあまりにも派手なHTMLメールを構築しています。コードはhttp://validator.w3.orgでXHTML 1.0 Transitionalとして直接入力で検証されます。 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;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> 

が完了した文書です。 https://wserver.flc.losrios.edu/~vapa/email/20110203_email.htmlこれは、Gmailがギャップを表示している左の列です。

アドバイスはありますか？それは任意のヘルプですが、別の電子メールクライアントでのCSSサポートの包括的なガイドがwww.campaignmonitor.com/css/

Answer 1

で存在する場合

Answer 2

知らんあなたの質問に具体的な答えは、Gmailの画像のみが含まれているテーブルセルに余分なスペースを追加することです。解決するにはこの問題は、これらのイメージに追加します。

style="display:block" 

ヒント：MailChimpあるよう Campaign Monitorは、偉大なリソースです。双方は、等独自のテーブルセル内の任意の画像について

Answer 3

いくつかのガイド、テンプレートの例を提供するディスプレイを使用する：ブロックと行の高さ：50％

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

が0 0とマージンにパディングを設定しますただし、マージンを-1pxに設定すると、iPhone/iPadの小さなギャップが修正される可能性があります。

スティック：bodyタグではなく、それはいくつかのクライアントによって取り除か得るだろうと頭、内

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

あなたのコードが有効であればハングアップしないでください。クロスブラウザとクライアントで動作する電子メールテンプレートを取得すると、厄介なコードになります。

P.S. Outlook 2007（Wordレンダリングエンジンを使用する）とFirefoxのHotmailに注意してください。

Answer 4

私のhtmlでは、同じ高さの複数の画像を並べて含む表のセルがたくさんあります。このテクニックの問題は、私のイメージを表示ブロックにすることができなかったことが判明しました。それは、レイアウトが大幅に乱れるからです。 Gmailのギャップを解消するための解決策は、行の高さのスタイルをテーブル自体に追加することでした。私はすべてのブラウザで肯定的な結果をテストしました。正直言って、私は100％確信しているわけではありませんし、すべてのケースで動作する場合は、あなたの状況は私のような場合は、このソリューションを試してみたいかもしれません。

PS、感謝の気持ちで@Jonと@Jasonに感謝します。

Answer 5

イメージのみを含む表セルがあり、イメージの下に余分なスペースが残っている場合は、line-height:0;を表のセルに追加します。たとえば、<td style="line-height:0;">となります。

Answer 6

あなたは=「0」、インラインCSSを使用しALIGN =「トップ」との境界線を追加したくない場合は、次の

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

Answer 7

私はこれは古い記事ですけど、これはまだ誰のために、私を助けました見た目： <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

margin、font-size、およびline-heightが "0"に設定された段落タグでイメージを折り返します。 OutlookとGmailの両方で誤った段落、スパン、フォントタグが追加されていたことに気付きました。これが他の人に役立つことを願っています

Answer 8

この問題は、shudderによって修正され、Dreamweaverとイメージマップを使用して修正されました。私は他の方法がない場合にのみこれを提案しますが、私の問題は解決しました。