画像間のギャップを表示するGmail
クライアント用の非常に派手なHTMLメールを作成します。コードは、直接入力によりXHTML 1.0 Transitionalとして http://validator.w3.org で検証します。事はGmailが各画像間のギャップを表示することです。
各画像とそのアンカーには、パディングとマージンをゼロに設定するインラインスタイルがあります。アンカータグと囲まれた画像タグの間、または後続のアンカータグの間に空白はありません。コードに改行はありません。
ここでは、受信した電子メールから直接貼り付けられます。
<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&sessionlanguage=&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&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&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&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 "A Chorus Line"--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 "Insight" (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がギャップを示しているのは左の列です。
何かアドバイス？
質問に対する具体的な答えは、Gmailが画像のみを含むテーブルセルに余分なスペースを追加することです。この問題を修正するには、これらの画像に追加します。
style="display:block"
ヒント：キャンペーンモニター は MailChimp と同様に優れたリソースです。両方とも、いくつかのガイド、テンプレートの例などを提供します。
独自のテーブルセル内の画像には、display：blockおよびline-height：50％を使用します
<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />
パディングを0に、マージンを0に設定しますが、マージンを-1pxに設定すると、iPhone/iPadの小さなギャップが修正される場合があります。
スティック：<style type="text/css"> img{display: block;}</style>
...一部のクライアントによって削除されるため、ヘッドではなくbodyタグ内にあります。
コードが検証されてもハングアップしないでください。クロスブラウザやクライアントで動作する電子メールテンプレートを取得すると、コードが不愉快になります。
追伸Outlook 2007（Wordレンダリングエンジンを使用）およびFirefoxのHotmailに注意してください。
Dunnoが助けになりますが、さまざまなメールクライアントのCSSサポートに関する包括的なガイドがあります www.campaignmonitor.com/css/
私のhtmlには、同じ高さの複数の画像を並べて含むテーブルセルがたくさんあります。この手法の問題は、レイアウトを大幅に混乱させるため、画像を表示ブロックにできないことでした。 Gmailのギャップを解消するための解決策は、単純に行の高さのスタイルを追加することでした：テーブル自体に50％。すべてのブラウザーでテストしたところ、良い結果が得られました。正直に言うと、なぜこれが機能するのか、それがすべての場合に機能するのかは100％わかりませんが、あなたの状況が私のようなものである場合は、このソリューションを試してみてください。
PS、アイデアをくれた@Jonと@Jasonに感謝します。
インラインcssを使用しない場合は、align = "top"およびborder = "0"を追加します。
`<img src="" width="100" height="100" alt="" align="top" border="0" />`
画像のみを含むテーブルセルがあり、画像の下にまだ余分なスペースが表示される場合、解決策はline-height:0;をテーブルセルに追加することです。たとえば、<td style="line-height:0;">。
私はこれが古い投稿であることを知っていますが、これはまだ探している人にとっては助けになりました：<p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>
マージン、フォントサイズ、行の高さを「0」に設定して、画像を段落タグでラップします。 OutlookとGmailの両方が誤った段落、スパン、フォントタグを追加していることに気付きました。これが他の誰かに役立つことを願っています。
この問題をshudderでDreamweaverとイメージマップを使用して修正しました。他に方法がない場合にのみこれを提案しますが、それは私の問題を修正しました。