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>

---

使用以下规则手动控制空白：

white-space:pre

---

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

您可以发布完整的表格+css，或者引用JSFIDLE吗？我看不出它在当前的形式下是如何工作的。哦，图像URL被破坏了。好的，使用after解决了我的问题。