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

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

title

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

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

%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;",這樣子圖片的垂直對齊就是會在文字的<span style="color: #339966;">底端</span>,這樣就不會有白邊了。

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2017-12-26-16-55-03

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

Leave a Reply