如何擺脫表格單元格中多餘的垂直間距？

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