深夜加班的“诡异空白”
凌晨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: 12px;
}
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: 12px;
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，小心影响到文字内容，慎用！
下次遇到类似问题，先问一句：“你的元素对齐基线了吗？”
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
