在網頁裡加入圖片或是inline-block物件時,底端都會多一個小小的白邊,這其實是跟字型有關,這一篇就要來介紹怎麼移除這個白邊。
當我們在網頁裡加入一張圖片
1 |
<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;",這樣子圖片的垂直對齊就是會在文字的<span style="color: #339966;">底端</span>,這樣就不會有白邊了。
這個方法也適用在其它inline-block物件,像是 iframe, object 和 embed。