如何移除HTML表格单元格内图片与行底部边框之间的空隙

HTML中<img>属于行内替换元素，默认vertical-align属性值为baseline，浏览器会为行内文字的下伸部分预留空间，这部分预留空间就是图片与行底部边框之间空隙的核心来源。此外当前代码仅设置了table的padding为0，没有清空td的默认内边距，也会放大空隙效果。

以下方案任选其一即可，配合清空td默认内边距效果更佳：

• 方案1：修改图片的垂直对齐规则
  给img样式新增vertical-align: bottom（也可替换为top/middle，只要不是默认的baseline即可）：

img {
    width : 25px;
    height: 25px;
    border : 1px solid red;
    vertical-align: bottom; /* 新增此行 */
}

• 方案2：将图片转为块级元素
  设置display: block，脱离行内元素的对齐规则约束：

img {
    width : 25px;
    height: 25px;
    border : 1px solid red;
    display: block; /* 新增此行 */
}

• 方案3：设置单元格行高为0
  给td样式新增line-height: 0，直接消除行内预留空间：

td {
    padding: 0;
    line-height: 0; /* 新增此行 */
}

<style>
table  {
  border : 2px solid brown;
  border-collapse: collapse;
  padding : 0px;
}
/* 新增td样式清空默认内边距 */
td {
  padding: 0;
}
tr {
    border : 1px dotted darksalmon ;
    height : auto;
}        
img {
    width : 25px;
    height: 25px;
    border : 1px solid red; 
    vertical-align: bottom;
}
</style>

内容的提问来源于stack exchange，提问作者Chris V.