深夜加班的“詭異空白”

凌晨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