html - 表格行/单元格之间不需要的空间，第 532 次

Question

table 又打败了我。

我这里有一个非常简单的:

<table style="width: 200px; margin: 20px auto; border-collapse: collapse; border-spacing: 0; border: none;">
  <tr style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
      <img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" alt="" style="width: 100%;">
    </td>
  </tr>
  <tr style="background-color: grey; margin: 0; padding: 0; border: none; border-collapse: collapse;">
    <td style="margin: 0; padding: 0; border: none; border-collapse: collapse;">Hehehehehehe</td>
  </tr>
</table>

fiddle : http://jsfiddle.net/ohys4x2o/

我想我已经添加了太多样式，例如 border: none; padding: 0; 等等代码 - 但仍然在带有猫的行和带有“Hehehe”文本的灰色行之间有一个不需要的空间。

欢迎表专家。请帮忙。请。那些 table ..他们..杀了我...

Answer 1

将图像的垂直对齐设置为顶部:

img {
  vertical-align:top;
}

jsFiddle example

默认设置为基线并为下行文本元素(例如 g、y、j)保留空间