1

In this example: http://jsfiddle.net/vGAm6/

<table style="width: 100%;border-collapse: collapse;">
    <tr class="top-padding" style="height: 64px; width: 100%;"></tr>
    <tr class="content" style="width: 100%;">
      <td class="content-container" style="padding: 0;">
        <table class="content" style="width: 600px; margin: auto; border-collapse: collapse;">
          <tr class="header" style="background-color: black;">
            <td style="padding: 0; width: 96px;"><img src="http://f.cl.ly/items/0j0j1K3m2I413t3U1533/1389661583_bird_twitter_new_square.png" style="width:64px; height: 64px;"/></td>
            <td style="padding: 0; color: white; font-weight: lighter; vertical-align: middle; font-size: 32px;">Cool Beans</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

There is an obtrusive 4px padding below the image. How can I make it go away?

justspamjustin
  • 1,730
  • 3
  • 19
  • 30
  • Try `img { display: block; }` or add `style="display: block;"` to your `img` tag, `img` tags render `inline` by default, browsers render extra spacing under `inline` elements to allow for descenders. – Mathijs Flietstra Jan 13 '14 at 19:51

1 Answers1

2

Set the vertical alignment on the image:

img {
    vertical-align:top;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272