マージン、パディング、アウトルック電子メールの位置を使用せずにテンプレートを設計する方法

Question

私は、既存の静的な背景イメージにサーバーからの動的イメージとテキストを配置する必要があるMicrosoft Outlook電子メールのテンプレートを設計する必要があります。私はdivのだけでなく、テーブルを使用してそれを設計しようとしたまた、HTMLのインラインCSSと（！重要）を与えた。マージン、浮動小数点、位置、レイアウトなどのタグのサポートは常に分かりませんでした。 Outlookの電子メールはこれらのCSS属性をサポートしていないことがわかりました。レイアウトの分割なしでテンプレートをデザインする方法を提案してください。

using div: 
    <div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" "> 
          <h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div> 
         <h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3> 
         <img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important; 
             width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png"> 

    using table: 
<tr> 
        <td> 
         <img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg"> 
        </td> 
        <td align="center"> 
         <span style="margin-left: -1458px;"> 
          <img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" "> 
          <span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span> 
         </span> 
        </td> 
        <td align="center"> 
         <span style="margin-left: -1253px;"> 
          <img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" "> 
         </span> 
        </td> 
        <td> 
         <h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; "> 
          <strong>Some text</strong> 
          </h2> 
         <h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3> 
        </td> 
       </tr> 

Answer 1

テーブルは通常、Outlookの電子メールで動作しますが、そうでない場合は、あなたの場合」：リンク

以上

this is how my template should look.

http://templates.mailchimp.com/resources/email-client-css-support/ は、私はそれらを整列させるための2つの異なる方法でそれを試してみましたたとえば、40ピクセルの余白を取得しようとすると、その場所に40ピクセルの透明な画像を追加します。