title: HTML emails in 2013: How to control spacing between elements like paragraphs and images?
body: <p>I am currently redesigning some HTML email templates, which is something I haven't done for a couple of years in this much depth.</p>
  
  <p>I've made my template in an HTML file which I'm testing locally in the browser, and it all looks fine.</p>
  
  <ul>
  <li>I'm using tables for layout</li>
  <li>The only other tags I'm using are <code>&lt;p&gt;</code> <code>&lt;a&gt;</code> and <code>&lt;img&gt;</code></li>
  <li>The CSS is in a <code>&lt;style&gt;</code> tag after the opening <code>&lt;body&gt;</code> tag for now but I am converting it to inline styles before sending, using <a href="http://beaker.mailchimp.com/inline-css" rel="nofollow">MailChimp's CSS Inliner Tool</a>. I just put it in a style tag for you to see the CSS easier here. It makes no difference in a lot of clients anyway, for testing purposes.</li>
  </ul>
  
  <p>Now that I'm sending test emails from my PHP application, I'm trying to get them to come through to the email client(s) looking the same as my mockup.</p>
  
  <p>The main thing I notice is that the margin/padding styles seem to be either ignored (e.g. Outlook 2007) or extra padding/margin is added on things like <code>&lt;td&gt;</code> which makes everything way more padded than I told it to be (e.g. Hotmail).</p>
  
  <p><strong>Example Source</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;style type="text/css"&gt;
      td {font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444;}
      a {color:#056DA5;}
      p {margin:0; padding:6px 0 6px 0;}
      .tel {font-weight:bold; color:#056DA5;}
      #wrapper {padding:10px;}
      #signoff {padding:18px 0;}
      #signoff #questions {padding-bottom:18px;}
      #signature {padding-top:20px; border-top:1px solid #EEE;}
      #signature td {font-size:12px; color:#777;}
      #signature #logo {padding-bottom:12px;}
      #signature #contact p {padding:3px 0 3px 0;}
      #signature #contact a {text-decoration:none; font-size:13px; font-weight:bold; color:#C00;}
      #signature #contact .tel {padding-top:6px; color:#777;}
      #signature #social {padding:20px 0 20px 0;}
      #signature #social a {margin-right:8px;}
      #signature #address {font-size:11px; color:#999;}
  &lt;/style&gt;
  
  &lt;table id="wrapper" width="100%" bgcolor="#FFFFFF"&gt;
      &lt;tr&gt;
          &lt;td&gt;
  
              &lt;table&gt;
  
                  &lt;!-- ROW 1 --&gt;
                  &lt;tr&gt;
                      &lt;td&gt;[CONTENT]&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;!-- ROW 2 --&gt;
                  &lt;tr&gt;
                      &lt;td id="signoff"&gt;
                          &lt;p id="questions"&gt;If you have any questions, email us at &lt;a href="mailto:support@example.com"&gt;support@example.com&lt;/a&gt; or call &lt;span class="tel"&gt;01234567890&lt;/span&gt;.&lt;/p&gt;
                          &lt;p&gt;Thanks,&lt;/p&gt;
                          &lt;p&gt;Company&lt;/p&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;!-- ROW 3 --&gt;
                  &lt;tr&gt;
                      &lt;td id="signature"&gt;
                          &lt;table cellpadding="0" cellspacing="0"&gt;
                              &lt;tr&gt;
                                  &lt;td id="logo" colspan="3"&gt;
                                      &lt;img src="http://www.example.com/images/email/logo.gif" alt="Company" /&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td id="contact"&gt;
                                      &lt;p&gt;&lt;a href="http://www.example.com"&gt;www.example.com&lt;/a&gt;&lt;/p&gt;
                                      &lt;p&gt;&lt;a href="mailto:support@example.com"&gt;support@example.com&lt;/a&gt;&lt;/p&gt;
                                      &lt;p class="tel"&gt;01234567890&lt;/p&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td id="social"&gt;
                                      &lt;a href="https://www.facebook.com/"&gt;&lt;img src="http://www.example.com/images/email/facebook.gif" alt="Facebook" /&gt;&lt;/a&gt;
                                      &lt;a href="https://twitter.com/"&gt;&lt;img src="http://www.example.com/images/email/twitter.gif" alt="Twitter" /&gt;&lt;/a&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td id="address"&gt;Company, address, city, post code&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Try viewing the HTML in your browser, and then try sending as an email to see what I mean.</p>
  
  <p><strong>What am I doing wrong and how can I make the email come through with the intended CSS?</strong></p>