如何让td（表格单元格）高度与<a>（链接元素）高度一致？

问题场景 #

设置块级链接的font-size和line-height均为16px，预期表格单元格(td)高度与链接一致为16px，但实际td高度为18px，比链接多出2px。

示例代码 #

HTML代码

<table>
  <tr>
    <td>
      <a href="#">
        Link
      </a>
    </td>
  </tr>
</table>

CSS代码

a {
  display: block;
  font-size: 16px;
  line-height: 16px;
}

原因分析 #

表格单元格默认vertical-align属性值为baseline（基线对齐）。当文本以基线对齐时，浏览器会为字体的下行部分（如字母g、y的下半段）预留默认空间，即便链接设置了line-height:16px，这部分预留空间仍会撑开td的高度，导致多出2px。

解决方案 #

方法1：修改td的垂直对齐方式

给td设置vertical-align: top（或middle、bottom均可），让单元格根据内容实际高度对齐，不再预留基线下方的额外空间：

td {
  vertical-align: top;
}

方法2：统一td和链接的行高

给td设置与链接相同的line-height，配合vertical-align: middle，也能消除额外高度：

td {
  line-height: 16px;
  vertical-align: middle;
}

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