HTML电子邮件中的图像聚集在一起

时间:2013-12-12 16:27:49

标签: html

我有一个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>

1 个答案:

答案 0 :(得分:0)

使用以下规则手动控制空格:

white-space:pre

然后使用空格键添加空格。