html - 電子メールクライアントのハイパーリンクされた画像の周りのパディング

Question

ハイパーリンクされた画像と段落があります

<a href="#"><img src=""  align="right"/></a><p>Some text</p>

ただし、このハイパーリンクにより、Outlookの電子メールの段落にパディングが発生しています。

回避策はありますか？

Answer 1

HTMLメールを作成するときは、グッドプラクティスの概念をすべて放棄する必要があることがわかりました。テーブルを使用し、クライアントがcssを理解しないか、古いhtmlタグを理解しないと想定します。

<table width="100%" style="width: 100%;">
    <tr>
        <td width="100%" style="width: 100%;">
            <p>Some text</p>
        </td>
        <td align="right" style="text-align: right;">
            <a href="#"><img src="" /></a>
        </td>
    </tr>
</table>

すべてのブラウザと可能なすべてのクライアントでチェックすることをお勧めします（hotmail、さまざまなブラウザのgmail ect、thunderbird、Outlook ...）

Answer 2

HTMLメールのスタイリングはやや面倒なプロセスです。Outlookは、従来のWebベースの電子メールプロバイダー（yahoo、hotmail、gmailなど）とは大きく異なるように見える可能性があるため、複雑になるだけです。

とはいえ、ハイパーリンクにインラインスタイルを適用してみましたか？

<a style="padding:0; margin:0;" href="#">......

Answer 3

画像用に別のテーブルを追加することで修正されます

<table border="0" cellpadding="0" cellspacing="0" width="x">
   <tr>
     <td><p>Some text goes here</p></td>
     <td><img src="picture.jpg" /></td>
   </tr>
</table>