我有一个HTML电子邮件,在gmail中显示正常,在Outlook中显示正常,除了4个图像/图标,它们在一起并没有空格。导致问题的代码是:
<tr style="height: 60px;width: 100%;background-color: #ff8000;margin-bottom: 5px;">
<td style="border-radius:15px;"><span style="display: inline-block;float: left;font-size: 13px;padding-left: 20px;font-family: arial, sans-serif, 'Century Gothic';text-align:center;"><a href="http://www.123.com/" style="text-decoration: none;">123</a></span>
<span style="display: inline-block;float: left;font-size: 13px;padding-left: 10px;font-family: arial, sans-serif, 'Century Gothic';text-align:center;">|</span>
<span style="display: inline-block;float: left;font-size: 13px;padding-left: 10px;font-family: arial, sans-serif, 'Century Gothic';text-align:center;"><a href="http://www.123.com/shop" style="text-decoration: none;">Shop</a></span>
<p>
<span style=" display: inline-block;float: right;padding-right: 40px;"><a href="https://plus.google.com/" style="text-decoration: none;"><img src="https://storage.blob.core.windows.net/googleplus.png" title="googleplus"/></a></span>
<span style="display: inline-block;float: right;padding-right: 40px;"><a href="https://www.linkedin.com/" style="text-decoration: none;"><img src="https://storage.blob.core.windows.net/linkedin.png" title="linkedin" /></a></span>
<span style="display: inline-block;float: right;padding-right: 40px;"><a href="https://www.facebook.com/" style="text-decoration: none;"><img src="https://storage.blob.core.windows.net/facebook.png" title="facebook"/></a></span>
<span style="display: inline-block;float: right;padding-right: 40px;"><a href="https://www.twitter.com/" style="text-decoration: none;"><img src="https://storage.blob.core.windows.net/twitter.png" title="twitter"/></a></span>
</p>
</td>
</tr>
答案 0 :(得分:0)
使用以下规则手动控制空格:
white-space:pre
然后使用空格键添加空格。