为何第三个表格中元素同时设inline-block与overflow:hidden会出现额外内边距？

我来帮你拆解这个问题的根源和解决办法：

问题场景回顾 #

你设置了三个对比表格，当给<span>同时添加display: inline-block和overflow: hidden时，第三个表格的单元格莫名出现了额外内边距；但单独设置其中一个属性时完全正常，且Safari浏览器不受这个问题影响。你疑惑的点很关键：为什么控制水平方向溢出的overflow: hidden，会触发垂直方向的布局异常？

核心原因：基线计算规则的变化 #

这背后是CSS规范中关于inline-block元素基线的特殊定义：

• 默认状态下，inline-block元素的基线和普通inline元素一致，是其内部文本的基线。
• 但当inline-block元素设置了overflow: hidden（或scroll/auto，只要不是默认的visible），它的基线会切换为自身外边距的下边缘，不再参考内部文本的基线。

而表格单元格(<td>)的默认vertical-align值是middle，浏览器在渲染时会基于这个基线变化重新计算单元格高度：原本对齐文本基线的布局逻辑被打破，浏览器为了适配新的基线位置，会在单元格底部撑开额外的空间——也就是你看到的"额外内边距"。

至于Safari没有这个问题，是因为WebKit内核（Safari的渲染引擎）在处理表格单元格内inline-block元素的垂直对齐逻辑时，和Chrome/Firefox使用的Blink/Gecko引擎存在细微差异，它没有因为基线变化而额外撑开空间。

解决方案 #

只需要修改inline-block元素的vertical-align属性，打破基于基线的布局逻辑即可：

• 给.three span添加vertical-align: top（你代码里已经注释了这个属性，取消注释就能解决问题）
• 或者设置vertical-align: bottom/vertical-align: middle，都能让浏览器重新计算布局，消除额外内边距。

修改后的CSS代码示例：

table { border-collapse: collapse; margin: 10px; }
td { border: 1px solid black; }
span { background-color: red; }
.one span { display: inline-block; /* overflow: hidden; */ }
.two span { /* display: inline-block; */ overflow: hidden; }
.three span { display: inline-block; overflow: hidden; vertical-align: top; }

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