HTMLメールで画像の間に隙間ができる
画像をブロック要素に
先日、HTMLメールの制作をしていましたら、次のような現象に遭遇しました。
画像のあいだに余白ができてしまいました。
以前、似たような現象に対する記事を書かせて頂きましたが、それとはまったく異なる現象です。
実はこれ、Gmailでの表示です。
なので同じソースをIE6/7で表示してもまったく崩れません。
いわば、メーラーのみで起こる表示崩れの現象です。
そもそも画像をインライン要素として配置すると、ブラウザでは画像の上下にわずかな余白ができるのがブラウザにおけるデフォルトの挙動です（これを調整するのがfont-sizeであったりvertical-alignといったプロパティです）。
メーラー表示の際に発現する上記例についても、大半はvertical-alignで直すことができるのですが、一部の画像では何をしても余白が消えないときがあります。
インライン要素としてマークアップするから余白が生まれるのですから、逆転の発想を行います。
つまりブロック要素にしてしまえば、このような余白は生じなくなります。
<img src="○○○.jpg" style="display:block"/>
こうすることで、OutlookでもGmailでもYahoo!メールでも、主要メーラーでの表示を整えることができます。
HTMLメール特有の制約
ちなみに、HTMLメールの表示環境は非常に独特なため、コーディングにも制約があります。
あくまで一例ですが・・・
特にCSSは効かないものが多いです。
なので、基本的にはテーブルコーディングをすれば、大きな崩れは見られません。
ただしFireworksの自動書き出し機能に頼ると、予期せぬところで崩れが生じて無駄に時間を消費してしまうので、イチからテーブルで組んでゆくことをオススメします。
