如何摆脱表格单元格中额外的垂直间距？

Question

在这个例子中： 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>

图像下方有一个突出的4px填充。我怎么能让它消失？

Answer 1

在图像上设置垂直对齐：

img {
    vertical-align:top;
}

<强> jsFiddle example