HTMLメールで隙間が出来たときに試すこと（画像間のスペース）

背景

• HTMLメールをコーディングしていました
• ブラウザでは問題なく表示
• 広告メディアへ出稿すると「画像間に隙間があります」と返答アリ
• 広告メディアからのスクショを見ると、確かにスペースが入っている
• デザイン上、そのままでは不都合

どうしたか（誤魔化した）

• HTMLメールはtable組みされることが多いが、問題の箇所はdivに置き換えた
• 画像要素をdivでラップし、そのdivにbackground-colorをかけた（要は隙間を不自然じゃないように塗りつぶした。隙間自体は存在したまま）

htmlメール例

<!-- Before -->
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%">
  <tr>
    <td style="padding: 0"><img src="img01.jpg" width="600" style="max-width: 600px; width: 100%" alt="画像１" /></td>
  </tr>
  <tr>
    <td style="padding: 0"><img src="img02.jpg" width="600" style="max-width: 600px; width: 100%" alt="画像２" /></td>
  </tr>
</table>

<!-- After -->
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%">
  <tr>
    <td>
      <div style="background-color:#000"> <!-- 例えばスペースを黒に塗りつぶし -->
        <div style="padding: 0">
          <img src="img01.jpg" width="600" style="max-width: 600px; width: 100%" alt="画像１" />
        </div>
        <div style="padding: 0">
          <img src="img02.jpg" width="600" style="max-width: 600px; width: 100%" alt="画像２" />
        </div>
      </div>
    </td>
  </tr>
</table>

他のHTMLメールを見て気づいたこと

• キレイに出来ている（スペースがなさそうな）HTMLメールのソースを確認したところ、画像１つ１つにheightが設定してあった。しかもstyle属性ではなく、height属性として...
• 試してないけど、スペースに悩んでいたら、試す価値はあると思う

htmlメール例２

<!-- 画像にheight属性を追加 -->
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%">
  <tr>
    <td>
      <div style="background-color: #000">
        <div style="padding: 0">
          <img src="img01.jpg" width="600" height="512" style="max-width: 600px; width: 100%; height: 512px" alt="画像１" />
        </div>
        <div style="padding: 0">
          <img src="img02.jpg" width="600" height="426" style="max-width: 600px; width: 100%; height: 426px" alt="画像２" />
        </div>
      </div>
    </td>
  </tr>
</table>