Padding and Margin not working in Responsive Email Template (outlook)

Question

I have created one responsive email template in html. There are some styles issues.

I think Padding and Margin not working in outlook 2007 and above. I have tried so many options like these below

Margin in html not working in Outlook

css padding is not working in outlook

I need the template with pure html (without providers like compaign monitor etc)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Simple Responsive HTML Email</title>
    <style type="text/css">
      .content {max-width: 900px !important;}
      .dynamic_container{width: 250px !important;border:1px solid #ccc;margin-top:25px;margin-bottom:25px;margin-left:25px;margin-right:25px;}
      a{padding-top: 10px;padding-bottom: 10px;padding-left: 15px;padding-right: 15px;}
      
      @media (min-width:651px) and (max-width: 768px){
      .content {max-width: 600px !important;}
      }
      @media (min-width:0px) and (max-width: 650px){
      .content {max-width: 300px !important;}
      .dynamic_container{width: 300px !important;border:1px solid #ccc;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;}
      }
    </style>
  </head>
  <body yahoo bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">
    <!--[if (gte mso 9)|(IE)]>
      <style>
        .dynamic_container{width: 300px !important;border:1px solid #ccc;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;}
        .button > a{border-width: 10px 15px;border-color: #556401;border-style: solid;padding-top: 10px;padding-bottom: 10px;padding-left: 15px;padding-right: 15px;}
      </style>
      <table width="300" align="center" cellpadding="0" cellspacing="10" border="0">
        <tr>
          <td>
    <![endif]-->
    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
          <table width="100" align="left" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="70" style="padding: 0px 20px 20px 0px;">
                <img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;">
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_002.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_002.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_002.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_003.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_003.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_003.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_004.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_004.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_004.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_005.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_005.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_005.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">  
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_006.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_006.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_006.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="5" cellpadding="10">
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 15px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">&copy; Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding: 20px 0 0 0;">
                <table border="0" width="100%" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="50%" align="right" style="padding: 0 10px 0 10px;">
                      <a href="http://www.facebook.com/">
                        <img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" />
                      </a>
                    </td>
                    <td width="50%" align="left" style="padding: 0 10px 0 10px;">
                      <a href="http://www.twitter.com/">
                        <img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" />
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
    <![endif]-->
  </body>
</html>

I have added some of the screen shot images.

In these images, i have outline the issue with red lines.

FYI, These red lines are not in the design

Desktop view

Mobile view

Outlook view

Can you please explain the issues as well...

Thanks in advance.

It seems _` display: block `_ is getting disabled or overwritten in outlook. — Yashwanth M, Mar 13 '18 at 11:35

score 1 · Accepted Answer · answered Apr 12 '18 at 07:47

Padding not working for anchor <a> tag in Outlook. So i have used padding for elements in the table..

Here is the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A Simple Responsive HTML Email</title>
    <style type="text/css">
      .content {max-width: 900px !important;}
      .dynamic_container{width: 31.33% !important;border:1px solid #ccc;margin:1%;}
      a{padding: 10px 8px !important;}
      
      @media (min-width:651px) and (max-width: 992px){
      .content {max-width: 600px !important;}
      .dynamic_container{width: 47% !important;margin:1.5%;}
      a{padding: 10px 0 !important;}
      }
      @media (min-width:0px) and (max-width: 650px){
      .content {max-width: 300px !important;}
      .dynamic_container{width: 96% !important;border:1px solid #ccc;margin:2%;}
      }
    </style>
  </head>
  <body bgcolor="#f6f8f1" style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; min-width: 100% !important;">
    <!--[if (gte mso 9)|(IE)]>
      <style>
        .dynamic_container{width: 32.6% !important;border:1px solid #ccc;}
        .button{padding:10px !important;}
      </style>
      <table width="100%" align="center" border="0">
        <tr>
          <td>
    <![endif]-->
    <table class="content" align="center" width="100%">
      <tr>
        <td class="header" bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
          <table width="100" align="left" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td height="70" style="padding: 0px 20px 20px 0px;">
                <img src="assets/images/i4cfinancial_Logo.png" border="0" alt="" style="height: auto;" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="innerpadding borderbottom" style="border-bottom: 1px solid #f2eeed;">
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <table class="dynamic_container" width="100%" align="left" border="0" style="margin-bottom:5px;">  
            <tr>
              <td>
                <table width="100%" border="0">
                  <tr>
                    <td colspan="2" class="comment_text" style="color: #153643; font-family: sans-serif;font-size: 13px; line-height: 22px;padding: 10px 10px 10px 10px;">
                      Recent weeks have seen prices trending up strongly. In recent sessions the uptrend has been strong. There are indications that this instrument is short-term overbought. The last session close was an outlier to the upside.
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Power Grid / Tradability </td>
                  </tr>
                  <tr class="grid">
                    <td style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/grid_20180304_001.png" style="height: auto;" />/<img src="OUTBOUND_EMAILS/US/tgrid_20180304_001.png" style="height: auto;" />
                    </td>
                  </tr>
                  <tr class="grid_header" style="color: #153643; font-family: sans-serif;">
                    <td colspan="2" style="font-size: 15px; line-height: 22px;padding: 10px 10px 10px 10px;font-weight: bold;text-align: center;">Recent Price Action</td>
                  </tr>
                  <tr class="grid">
                    <td colspan="2" style="font-size: 25px; line-height: 22px;padding: 0px 10px 0px 10px;font-weight: bold;text-align: center;">
                      <img src="OUTBOUND_EMAILS/US/sprk_20180304_001.png" style="height: auto;">
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0px 0px 0px;">
                      <table class="buttonwrapper" width="100%" align="center" border="0" cellspacing="10" cellpadding="50" valign="middle">
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Learn More...</a>
                          </td>
                        </tr>
                        <tr>
                          <td class="button" width="100%" style="background-color: #556401;text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0px 30px 0px 30px;">
                            <a width="100%" href="#" style="background-color: #556401;border: 0 none;color: #fff;display: block;text-decoration: none;">Guess to win...</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
          <table width="100%" border="0">
            <tr>
              <td align="center" class="footercopy" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">&copy; Someone, somewhere 2013<br/><a href="#" class="unsubscribe" style="display: block; margin-top: 20px; padding: 10px 50px; border-radius: 5px; text-decoration: none; font-weight: bold;"><font color="#ffffff">Unsubscribe</font></a>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding: 20px 0 0 0;">
                <table border="0" width="100%">
                  <tr>
                    <td width="50%" align="right" style="padding: 0 10px 0 10px;">
                      <a href="http://www.facebook.com/">
                        <img src="assets/images/fb.png" width="37" height="37" alt="Facebook" border="0" />
                      </a>
                    </td>
                    <td width="50%" align="left" style="padding: 0 10px 0 10px;">
                      <a href="http://www.twitter.com/">
                        <img src="assets/images/twit.png" width="37" height="37" alt="Twitter" border="0" />
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
    <![endif]-->
  </body>
</html>

And It's working fine in web mail providers like gmail, outlook...

score 0 · Answer 2 · edited Apr 16 '18 at 13:55

0

Check if you are putting display inline within any class. That's why top and button margin and padding not working.

Check below simple code in your css

display:inline

edited Apr 16 '18 at 13:55

Sarvan Kumar

926
1
11
27

answered Mar 13 '18 at 11:30

anil sidhu

963
1
9
24

I am not used display: inline property. – Sarvan Kumar Mar 13 '18 at 11:32
Yes. Working fine. – Sarvan Kumar Mar 13 '18 at 11:47
You can try display:block on the tag and try margin and padding . – anil sidhu Mar 13 '18 at 11:51

Padding and Margin not working in Responsive Email Template (outlook)

2 Answers2