私はどのようにhtml電子メールのfacebook twitterのアイコンがそれらの間にスペースを持っていることを確認する

私がstackoverflowで読んだすべての質問は、不必要に追加されたスペースの反対の問題を抱えています。私はどのようにhtml電子メールのfacebook twitterのアイコンがそれらの間にスペースを持っていることを確認する

私の場合、電子メールテンプレートにスタイルを追加してアイコンを配置しようとしましたが、動作しないようです。例：

<a href="http://www.instagram.com/thing" title="thing"> 
    <span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm"> 
     <img src="instagram.png" HSPACE="50" VSPACE="50"> 
    </span> 
</a>

出典

2017-03-16 Jeff Davies

最も簡単な方法は、アイコンの間にスペースPNGを追加することです。これはOutlookやGmailで確実に動作するようです。

<a href="http://www.instagram.com/thing" title="thing"> 
    <span style="font-size:12.0pt;font-family:&quot;Times New Roman&quot;,serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm"> 
     <img src="instagram.png" HSPACE="50" VSPACE="50"> 
    </span> 
</a> 
<img src="space.png" HSPACE="50" VSPACE="50">

出典

2017-03-16 12:43:41

どのようにこれらを積み重ねていますか？連続で？なぜテーブルを使用しないのですか？ – scoopzilla

彼らはテーブルの中にあります。何らかの理由で、電子メールに埋め込まれたhtmlは、ブラウザが行う特定の規則に従いません。 GmailとOutlookはスタイルを尊重しません：パディングやhspaceやvspaceの属性。異なる動作のもう1つの例は、インラインベース64イメージが電子メールでは機能しないことです（作業中のWebページから切り取って貼り付ける場合）。 –

彼らはそうではありません。 Outlookは文字通り電子メールにとっては純粋な悪です。そして、ほぼすべての主要電子メールプラットフォームにこの件について書かれた記事があります。 [Litmus]（https://litmus.com/community/discussions/396-conditional-code-for-outlook）または[Mailchimp]（https://templates.mailchimp.com/development/css/outlook-conditional-css） /）しかし、私が "キッチンシンク"と呼んでいるものを追加するのが最善の方法です。 – scoopzilla

<table cellpadding="0" cellspacing="0" border="0" width="300" align="center"> 
 
\t <tr> 
 
\t \t <td width="280" align="center"> 
 
\t \t \t <table cellpadding="0" cellspacing="0" border="0" width="275"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t <img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/c7f897c9-5491-41c5-b73a-40d1e29f1185.png" width="32px" height="32px" alt="facebook" vspace="10" hspace="25"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td width="20"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t <img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/9c7aac20-d385-4bde-a0cf-1ddb7d6f7060.png" width="32px" height="32px" alt="Twitter" vspace="10" hspace="25"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td width="20"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t <td align="center"> 
 
\t \t \t \t \t \t <img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/3b801696-a19c-4de3-adbe-c4cb9976d40b.png" width="32px" height="32px" alt="Instagram" vspace="10" hspace="25"/> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

使用の高さおよび/または幅のネストされたテーブルと空<td>。テーブルは、HTMLメールに関しては最高です。

出典

2017-03-16 17:17:41 scoopzilla

スペースTDが20の幅または高さ以下になると、TDのインラインスタイルのfont-sizeとline-heightを0pxに設定すると良いでしょう – sietse85

私はどのようにhtml電子メールのfacebook twitterのアイコンがそれらの間にスペースを持っていることを確認する

答えて

関連する問題