CSS表格工具栏添加<img>后高度异常增大的原因及解决方法

原因分析 #

1. CSS Table的默认垂直对齐规则：display: table-cell的默认垂直对齐方式是baseline（基线对齐），而非直觉中的居中对齐。
2. 行内元素的基线留白：<img>属于行内元素，默认会以基线对齐，图片下方会保留一小段留白（用于容纳文字的下行部分，比如字母g、y的底部）。当它和文字在同一个容器中时，基线对齐规则会让整个单元格的高度被额外撑开，哪怕图片本身尺寸远小于50px。
3. 未对齐的单元格内容：不带图片的按钮只有文字，在基线对齐规则下会被拉到与带图片按钮的基线一致的位置，视觉上就呈现为“下移”。

解决办法 #

以下几种方案都能解决问题，选一种适合你的即可：

方案1：给表格单元格设置垂直居中对齐 #

直接修改.toolbar-button的样式，强制所有单元格内容垂直居中，从根源上消除基线对齐的影响：

.toolbar-button {
  display: table-cell;
  padding: 0 15px;
  line-height: 50px;
  border: solid 1px black;
  vertical-align: middle; /* 新增：强制垂直居中 */
}

方案2：修正图片的垂直对齐方式 #

针对<img>元素调整垂直对齐，消除其基线留白带来的高度膨胀：

.imgbutton-container > img {
  margin-right: 10px;
  vertical-align: middle; /* 新增：让图片垂直居中对齐 */
}

方案3：重置flex容器的行高 #

父元素的line-height:50px会被flex容器继承，可能间接影响内部布局，给.imgbutton-container重置行高：

.imgbutton-container {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* 新增：重置行高为默认值 */
}

效果验证 #

修改后，带图片的按钮不会再撑开工具栏高度，所有按钮都会保持在50px高度内垂直居中，不带图片的按钮也不会下移。

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