在網頁裡加入圖片或是inline-block物件時，底端都會多一個小小的白邊，這其實是跟字型有關，這一篇就要來介紹怎麼移除這個白邊。


當我們在網頁裡加入一張圖片

<div><img src="100x40.png" width="100" height="40"></div>

圖片的下面會出現一條白邊，而且這個白邊就算是用瀏覽器的檢查工具也找不出是哪裡出了錯，其實是跟網頁預設的文字設定有關

在預設的狀態下，圖片的垂直對齊vertical-align是對齊在字的底線baseline(英文字母的底線)，所以從底線到字的底端還有一小段距離，這就是圖片底端有白邊的原因，如下圖說明

以文字大小font-size:12px來說，預設行高會是line-height:14px，這多出來的2px就會是圖片白邊的寬度
解決方法 | Solution
在圖片或inline-block物件加上align="absbottom" 或 style="vertical-align: bottom;"，這樣子圖片的垂直對齊就是會在文字的底端，這樣就不會有白邊了。

這個方法也適用在其它inline-block物件，像是iframe, object 和 embed。