実際のメールでGmailの電子メールのパディングが削除されています

Question

gmailの表にパディングの問題があります。どんな助けでも大歓迎です。これはGmailのメールですので、残念ながらすべてのCSSがインラインである必要があります。ありがとう！

それが適切なパディングと構成メッセージの中に次のようになります。

そして、それは実際の電子メールでのテーブルの上に詰め物を取り除くために表示されます。

これはの作品です

<td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;"> 

コード：

td要素にパディング付きコード210

<table style="max-width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" > 
      <tr> 
       <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;padding-top:40px !important;padding-right:30px !important;padding-bottom:20px !important;padding-left:30px !important; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;"> 

       <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" > 
        <tr> 
         <td height="70" style="padding: 0 20px 20px 0;"> 
          <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png" style="height: auto; "width="70" height="70" border="0" alt=""/> 
         </td> 
         <td> 
          <!--[if (gte mso 9)|(IE)]> 
          <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> 
           <tr> 
            <td> 
            <![endif]--> 
             <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px!important; width: 100%; max-width: 425px;"> 
              <tr> 
               <td height="70"> 
               <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                <tr> 
                 <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;"> 
                  CREATING 
                 </td> 
                </tr> 
                <tr> 
                 <td style="font-size: 33px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;"> 
                  Beautiful Fitness Web Design 
                 </td> 
                </tr> 
               </table> 
               </td> 
              </tr> 
             </table> 
            <!--[if (gte mso 9)|(IE)]> 
            </td> 
           </tr> 
          </table> 
          <![endif]--> 
         </td> 
        </tr> 
       </table> 
       </td> 
      </tr> 
       </table> 

Answer 1

私が言うことができるのは、悪夢なのです。私はスペースのtdブロックを作り、パディングを完全に取り出さなければならなかった。これは完成したコードですが、私は残念なことに、ツールを使って比較できるように編集する時間がありません。

<table style="width: 600px;" align="center" cellpadding="0" cellspacing="0" border="0" > 
       <tr> 
        <td background="http://timshoemake.io/wp-content/uploads/email-template/prowler3.png" style="line-height:10px; background-image:url('http://timshoemake.io/wp-content/uploads/email-template/prowler3.png'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: center; background-repeat: no-repeat;" > 

        <table width="70" align="left" border="0" cellpadding="0" cellspacing="0" > 
         <tr> 
          <td width="40px"> &nbsp;&nbsp;&nbsp;&nbsp; </td> 
          <td height="70" style="padding: 0 20px 20px 0;"> 
           <img src="http://timshoemake.io/wp-content/uploads/email-template/shoemaker_repair_blue@2x-2.png" style="height: auto; "width="70" height="70" border="0" alt=""/> 
          </td> 
          <td> 
           <!--[if (gte mso 9)|(IE)]> 
           <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> 
            <tr> 
             <td> 
             <![endif]--> 
              <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 425px; width: 100%; max-width: 425px;"> 

               <!-- top padding --> 
               <tr> 
                <td width="600px" height="40px"></td> 
               </tr> 

               <!-- header content --> 
               <tr> 
                <td height="70"> 
                <table width="425px" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Raleway', Helvetica, Arial, sans-serif;" > 
                 <tr> 

                  <td style="font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px; padding: 0 0 0 3px;"> 
                   Creating 
                  </td> 
                 </tr> 
                 <tr> 
                  <td style="font-size: 30px; line-height: 38px; font-weight: bold; color: #ffffff; padding: 5px 0 0 0;"> 
                   Beautiful Fitness Web Design 
                  </td> 
                  <!-- <td width="20px"></td> --> 
                 </tr> 
                </table> 
                </td> 
               </tr> 

               <!-- bottom padding --> 
               <tr> 
                <td width="600px" height="40px"></td> 

               </tr> 
              </table> 
          </td> 
             <!--[if (gte mso 9)|(IE)]> 
             </td> 
            </tr> 
           </table> 
           <![endif]--> 
         </tr> 
        </table> 
        </td> 
       </tr> 
</table> 

：仕事の約2時間後に、製品を完成