移除圖片或行內物件底端的白邊 | How to Remove the Space Below Images and Other Inline-Block Elements

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

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

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

圖片的下面會出現一條白邊,而且這個白邊就算是用瀏覽器的檢查工具也找不出是哪裡出了錯,其實是跟網頁預設的文字設定有關
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-26-16-54-37
在預設的狀態下,圖片的垂直對齊vertical-align是對齊在字的底線baseline(英文字母的底線),所以從底線到字的底端還有一小段距離,這就是圖片底端有白邊的原因,如下圖說明
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-26-16-54-46
以文字大小font-size:12px來說,預設行高會是line-height:14px,這多出來的2px就會是圖片白邊的寬度
解決方法 | Solution
在圖片或inline-block物件加上align="absbottom" 或 style="vertical-align: bottom;",這樣子圖片的垂直對齊就是會在文字的底端,這樣就不會有白邊了。
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-26-16-55-03
這個方法也適用在其它inline-block物件,像是iframeobject 和 embed。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *