图像和单元格之间的空间

Question

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

嗨，如何让图像拥抱细胞的底部？我尝试过填充，但它没有用。另外，为什么图像和它们的单元格天花板之间没有空间，但它们的底板之间有空间？

Answer 1

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

＆＃13;

＆＃13;

img {
  vertical-align: bottom;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这会有所帮助

<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" style="margin-top:4px"></td>
    
  </tr>

</table>

Answer 3

在底部img

的td上添加style="font-size: 0;"

（如果您将来在td中也有一些文本，请将字体大小专门添加到该文本范围。）

＆＃13;

＆＃13;

<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 style="font-size: 0;"><img src="https://image.ibb.co/ggprVo/img_bottom.png" alt="img_bottom" border="0"></td>
    
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;