html - 图像和单元地板之间的空间

Question

<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>

嗨，我如何让图像紧贴单元格的底部？我试过填充，但没有用。另外，为什么图像和他们的牢房天花板之间没有空间，而他们的楼层之间却有？

标签： htmlcss

Answer 1

默认情况下，td内容垂直对齐到顶部。添加 CSS 使它们与底部对齐。

img {
  vertical-align: bottom;
}

<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 class="full-height"><img src="https://image.ibb.co/ggprVo/img_bottom.png" alt="img_bottom" border="0"></td>
    
  </tr>

</table>