title: Remove spacing between table cells and rows
body: <p>I'm designing an HTML email template, which <a href="https://stackoverflow.com/questions/4829254/best-practices-for-styling-html-emails">forces me to use tables</a>. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.: </p>
  
  <p><img src="https://i.stack.imgur.com/rFeOM.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Email Template&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0"&gt;
          &lt;tr&gt;
              &lt;td id="main" style="background-color: #f2f2f2;"&gt;
                  &lt;h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;"&gt;Major headline goes here&lt;/h2&gt;
                  &lt;table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;"&gt;
                      &lt;tr&gt;&lt;td style="padding: 0; border: 1px solid red;"&gt;&lt;img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;&lt;td style="padding: 0; border: 1px solid red;"&gt;&lt;p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;"&gt;Caption.&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;&lt;!--/.main-story-image--&gt;
                  &lt;p style="margin: 0 50px 25px 25px;"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
                  &lt;p&gt;&lt;a href=""&gt;Click here to read more &lt;/a&gt;&lt;/p&gt;
                  &lt;div style="clear: both;"&gt;&lt;/div&gt;
              &lt;/td&gt;&lt;!--/#main--&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The red borders are there only to show the outlines of the cells. I don't want them there in the final version.</p>