OutlookでのTDへのスペースの追加（HTML電子メール）

Question

現在、電子メールニュースレターを作成しており、Litmusでテストしています。

ニュースレターは、（下の画像を参照）、次のようになります。

明らか

https://image.ibb.co/f4L7ma/Screen_Shot_2017_08_16_at_10_44_25.png

、Outlookのように完璧に見に行くされていませんが、文体の間にスペースを追加するためにどのような方法がありますOutlookのタグ。

これは、ニュースレターは、（Windows 7の）見通し2013年にレンダリングされる方法です。

https://image.ibb.co/itK06a/Screen_Shot_2017_08_16_at_10_44_11.png

注意してください、私は初期のテスト段階では、と私は当分の間の間隔についての唯一の心配。誰もがOutlookで、このための良い回避策を持っている場合

<!-- Main Changes Content Row One Starts --> 
<tr> 
    <!-- Row One left Box Starts --> 
    <td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column"> 
     <font face="'Open Sans', Arial, sans-serif"> 
      <!-- Change Text Here --> 
      <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;"> 
       <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia. 
      </span><br /><br /> 
     </font> 
    </td> 
    <!-- Row One left Box Ends --> 

    <!-- Row One Right Box Starts --> 
    <td align="left" width="48%" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column"> 
     <font face="'Open Sans', Arial, sans-serif"> 
      <!-- Change Text Here --> 
       <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;"> 
        <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia. 
       </span><br /><br /> 
     </font> 
    </td> 
    <!-- Row One Right Box Ends --> 
</tr> 
<!-- Main Changes Content Row One Ends --> 

が、それは素晴らしいことだ：

私は、以下のこのセクションのコードを添付しています。

Answer 1

outlookはパディングとマージンを使用しないようにしていますので、ここにはtdを追加してスペーシングを追加するのが良い方法です。さらに、見通しはGoogleフォントではなくシステムフォントのみを考慮する。また、パーセンテージの代わりにピクセル単位で幅を使用します。

<tr> 
    <!-- Row One left Box Starts --> 
    <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column"> 
    <font face="'Open Sans', Arial, sans-serif"> 
    <!-- Change Text Here --> 
    <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;"> 
    <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span> 
    <br /><br /> 
    </font> 
    </td> 
    <!-- Row One left Box Ends --> 
    <td align="left" width="20" bgcolor="#f5f4f4" class="100p mobile-column"></td> 
    <!-- Row One Right Box Starts --> 
    <td align="left" width="290" bgcolor="#FFFFFF" style="padding-left:20px;padding-right:20px;padding-top: 20px;color: #222222; text-decoration: none;" class="100p mobile-column"> 
    <font face="'Open Sans', Arial, sans-serif"> 
    <!-- Change Text Here --> 
    <span style="font-size:15px;font-weight: 400;color: #222222; text-decoration: none;"> 
    <strong>-</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiia.</span> 
    <br /><br /> 
    </font> 
    </td> 
    <!-- Row One Right Box Ends --> 
</tr>