如何让图片紧贴表格单元格底部？为何图片与单元格顶底间距不一致？

嘿，我来帮你搞定这个表格图片对齐的问题～

首先先看你的原始代码：

<table style="border-collapse:collapse" border="1" cellpadding="0">
  <tr>
    <td valign="bottom"><img src="https://image.ibb.co/dGqn38/img_top.png" alt="img_top" border="0"></td>
  </tr>
  <tr>
    <td style="background-color:#bd6365"> asdh'jksadh'kd </td>
  </tr>
  <tr>
    <td><img src="https://image.ibb.co/ggprVo/img_bottom.png" alt="img_bottom" border="0"></td>
  </tr>
</table>

先解答第二个问题：为什么图片和顶部无间距，底部却有？ #

这是因为<img>标签默认是行内替换元素，浏览器会把它和文字的基线对齐。基线下方会预留一小段空间，用来容纳像g、y这类带有“下行尾巴”的字母，所以图片和单元格底部之间就会出现间隙。而顶部没有间距，是因为单元格默认的垂直对齐是顶部，即使你设置了valign="bottom"，图片本身的基线对齐规则还是会让底部留空。

然后解决第一个问题：让图片紧贴单元格底部 #

这里有几个简单有效的方法：

方法1：把图片设置为块级元素（最推荐）

给<img>添加display: block样式，这样它就不再遵循行内元素的基线对齐规则，会自动填满单元格的高度，自然紧贴底部。修改后的代码如下：

<table style="border-collapse:collapse" border="1" cellpadding="0">
  <tr>
    <td valign="bottom"><img src="https://image.ibb.co/dGqn38/img_top.png" alt="img_top" border="0" style="display:block;"></td>
  </tr>
  <tr>
    <td style="background-color:#bd6365"> asdh'jksadh'kd </td>
  </tr>
  <tr>
    <td><img src="https://image.ibb.co/ggprVo/img_bottom.png" alt="img_bottom" border="0" style="display:block;"></td>
  </tr>
</table>

方法2：调整图片的垂直对齐属性

给<img>设置vertical-align: bottom，直接改变它的对齐方式，消除基线带来的底部间隙：

<img src="你的图片地址" style="vertical-align: bottom;">

方法3：设置单元格的行高为0

如果单元格里只有图片，没有文字，可以把单元格的line-height设为0，这样基线下方的预留空间就会被消除：

<td style="line-height:0;"><img src="你的图片地址"></td>

其中方法1是最稳妥的，因为块级元素的布局行为更直观，不会和行内元素的规则冲突，也不会影响其他内容。

内容的提问来源于stack exchange，提问作者Joshua Bautista