Question

我在stackoverflow上读到的所有问题都有相反的问题，即不必要地添加空格。

就我而言，我尝试在电子邮件模板中添加样式以分隔图标，但似乎都没有效果。例如：

<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>

Answer 1

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

使用嵌套表并使用高度和/或宽度清空<td>。在HTML电子邮件中，表格是最好的。

Answer 2

我发现最简单的方法是在图标之间添加一个空格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">

如何确保html电子邮件中的facebook twitter等图标之间有空格

2 个答案: