表格单元格与内容间的垂直间隙问题解析

1. 为什么div的display从inline-block改为block后间隙消失？ #

这是行内级元素的基线对齐规则导致的：

• 当div是inline-block时，它属于行内级盒模型，表格单元格默认的vertical-align: baseline会强制它对齐到单元格的基线。而基线下方会预留出一块对应字体下伸部分（比如小写字母g的尾巴）的空间，这就是你看到的底部间隙——哪怕把margin、padding都设为0，这个基线预留空间依然存在。
• 改成block后，div变成块级元素，不再参与行内基线对齐逻辑。块级元素会直接填充表格单元格的可用空间，表格单元格的高度会自适应div的实际高度，那点基线预留的空间自然就被挤没了。

2. 为什么img设为block后无法消除间隙？ #

核心原因是img是替换元素，和普通div这种非替换元素的渲染逻辑有本质区别：

• 即使把img的display设为block，表格单元格默认的vertical-align: baseline加上自身默认的font-size、line-height，会生成一个匿名的文本盒。这个文本盒的基线会让单元格的高度被撑开一部分——哪怕单元格里没有可见文本，浏览器还是会为这个匿名盒预留空间，导致img底部和单元格底部出现间隙。
• 而div作为非替换元素，设为block后会完全占据单元格的内容区域，直接覆盖掉匿名文本盒的影响，所以不会残留间隙。

如果要解决img的这个问题，可以试试这两个实用方案：

• 给表格单元格设置vertical-align: bottom，强制内容对齐到底部，跳过基线对齐逻辑；
• 把表格单元格的font-size和line-height都设为0，消除匿名文本盒的预留空间。

内容的提问来源于stack exchange，提问作者Humberto Fioravante Ferro