深夜加班的“诡异空白”

凌晨1点，程序员小林盯着屏幕上的网页布局，额头渗出细密的汗珠——明明图片和文字已经居中，但底部总有一道3px的空白缝隙，像一道无形的裂痕破坏页面美感。他反复检查了margin、padding，甚至怀疑是浏览器BUG，却始终找不到答案。直到同事老王路过，轻飘飘丢下一句：“试试vertical-align吧！”……

谜底揭晓：vertical-align的“潜规则”

原来，图片作为行内块元素（inline-block），默认与文字的基线（baseline）对齐。而文字的基线并非底部，而是文字的下边缘，导致图片下方多出空隙。这就像把图片放在一个“字母x的底座”上，自然会有缝隙！

解决方案：3招驯服vertical-align

对齐方式调整

设置图片的vertical-align为非基线值，如middle（中线对齐）或text-top（顶部对齐），让图片与文字“亲密无间”：

<div>
  <img src="frame_image.svg" alt="link" width="32" height="32" />
  默认对齐方式的图像
</div>
<div>
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  字体顶部（text-top）对齐的图像
</div>
<div>
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  字体底部（text-bottom）对齐的图像
</div>
<div>
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  中部（middle）对齐的图像
</div>

div {
  border: 1px solid red;
  margin-bottom: 14px;
}
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}

适用场景：图文混排时快速解决对齐问题

父元素使用flex布局

父元素使用flex布局，彻底摆脱行内对齐规则：

<div>
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  图像
</div>

div {
  border: 1px solid red;
  margin-bottom: 14px;
  display: flex;
}

父元素“降噪”

通过调整父元素的font-size或line-height，消除基线对齐的干扰：

.parent { font-size: 0; } /* 或 line-height: 0; */

[!Warning] 此方法可能影响父容器内的其他文字内容

总结：避坑指南与最佳实践

默认行为

图片作为行内块元素，始终与基线对齐，导致底部空白是正常现象，而非BUG。

可使用的方案

使用vertical-align: middle/top/bottom调整对齐，兼容性强且不影响布局，其次可使用flex布局，最次使用margin调整也可，但是不够优雅😄。

慎用技巧

调整父元素font-size或line-height，小心影响到文字内容，慎用！

下次遇到类似问题，先问一句：“你的元素对齐基线了吗？”

​转自https://juejin.cn/post/7498277142771400754