Изображения в HTML-формате электронной почты, сгруппированные вместе

Question

У меня есть 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> 

Answer 1

Используйте следующее правило для ручного управления пробельные:

white-space:pre 

Затем добавьте пробелы, используя пробел.