web-dev-qa-db-ja.com

Gmailのメールテーブルの間隔

私はこの馬が倒されたばかりであることを知っています。しかし、今朝私を困らせているだけのGmailテーブルスペースの問題があります。

<td valign="top">
        <img src="###/enewsletter_layout_v3_18.jpg" alt="" />
        <table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
            <tr>
                <td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
                New Patient Special Offer <br/>
                Save $$$
                </td>                   
            </tr>
            <tr>
                <td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
                    <h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
                    If you have read anything in this newsletter and have any questions or would like to 
                    discuss further, please contact <br/>
                    The Centre at (555) 555-5555 
                </td>                   
            </tr>           
        </table>

    </td>

私が何をしても、テーブルの最初の画像（layout_v3_18）alwaysの下にスペースがあります。 Gmailの約2〜3ピクセルの空白。メール内の他のいくつかの画像で発生しますが、残りは問題なく動作します。テーブルを何回比較しても機能しません。

考え？

emailgmail
37
Craig Hooghiem

最近、この問題に何度も遭遇しました。私たちが最も効果的に機能するコード（読み取り：ほとんどのメールクライアントで一貫性があるように見える）は次のとおりです。

<img src="###" style="display: block;" />

すべての画像にdisplay：ブロックを追加するだけで、問題が修正されます。

70
Stephen Walcher

私自身の質問（他の誰かが同様の問題を抱えている場合）に答えて、私は最終的に問題（またはとにかく解決策）を見つけました。

画像自体にstyle="float: left"を追加し、魔法のように修正しました。または、「display：block」を使用すると、すべての画像で同様の結果が得られる傾向がありますが、フロートは、GMailが他の場所で完全に正常に機能している場合、特にGMailの間隔をクリアするようです。

4
Craig Hooghiem

画像でdisplay:blockを使用すると、画像セル間のスペースがいくらか減少しましたが、すべてのギャップは削除されませんでした。

親テーブル（<table border="0" cellpadding="0" cellspacing="0">）に廃止されたcellpadding/cellspacing属性を追加すると、これらの最後のギャップもなくなりました。

2
phils

同じ問題が発生したため、以下の行を追加しました

  style="line-height:1px;"

上記のtdタグ内。

ファイルリストの私のhtmlテンプレート。

2
Twiggy

Gmailは、入れ子になったテーブルを含むすべてのテーブルの周囲に空白を追加できます。

インラインスタイルとして次のコードをテーブルに追加するちょっとしたハックですが、空白が削除されます。

style="font-size:0.0em;" ...
2
Jon Taylor

私は同じ問題を抱えており、上記のスタイルオプションをすべて実行しましたが、何も機能しませんでした。テーブルの高さを短くし、すべてのスペースを削除しました。

1
Fernan Dasalla