如何摆脱表格单元格中额外的垂直间距？ [复制]答案

【问题标题】：How can I get rid of extra vertical spacing in table cell? [duplicate]如何摆脱表格单元格中额外的垂直间距？ [复制]
【发布时间】：2014-01-13 19:45:06
【问题描述】：

在这个例子中： 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 填充。我怎样才能让它消失？

【问题讨论】：

尝试img { display: block; } 或将style="display: block;" 添加到您的img 标签，img 标签默认呈现inline，浏览器在inline 元素下呈现额外的间距以允许下行。

标签： html css

【解决方案1】：

在图像上设置垂直对齐方式：

img {
    vertical-align:top;
}

jsFiddle example

【讨论】：