本文首發(fā)于個(gè)人博客 http://www.lijundong.com/image-and-line-height/
今天在做一個(gè)靜態(tài)頁面時(shí)，圖片底部出現(xiàn)一條 3px 高度的白邊伤锚，既不是 margin 也不是 padding，找了好久沒能解決，后來才發(fā)現(xiàn)與 line-height 相關(guān)蛉拙，問題解決后查缺補(bǔ)漏厕宗，這里作下筆記。
解決問題之前需要理清楚幾個(gè)概念奠货，基線介褥、line-height、vertical-align递惋、inline 元素柔滔。
基線(baseline)
基線(Baseline) 是字體排印學(xué)中的概念，指的是多數(shù)字母排列的基準(zhǔn)線萍虽，大多字母都沿著紅色基線排列睛廊，舉個(gè)例子輔助理解
圖中 xHh 字母的下邊緣紅線就是基線的所在，那么有沒有一個(gè)特定的條件來定義基線呢杉编？這里有個(gè)概念可供參考
字母x的下邊緣(線)就是基線的所在超全。
這里又引出了 x-height 的概念，此處不表邓馒。
line-height
關(guān)于 line-height 如何定義的討論嘶朱，有說法是兩條基線之間的距離，看到這個(gè)結(jié)論我首先想到第一行的行高如何處理光酣，后來去找了資料疏遏，發(fā)現(xiàn)兩條基線之間的距離即是 line-height 這樣的結(jié)論并不準(zhǔn)確。
關(guān)于 line-height 的定義，MDN 闡述如下：
On block level elements, the line-height property specifies the minimum height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.
即
block 元素中财异， line-height 的值等于元素中高度最低的行框(line box) 的高度值倘零。
在 non-replaced inline 元素中，line-height 的值等于行框(line box) 的高度值戳寸。
注：
replaced element VS non-replaced element
- replaced element: 例如 img呈驶、video、canvas 此類渲染出的內(nèi)容引用外部的元素
- non-replaced element: 渲染自身的 content疫鹊，
例如<a href="lijundong.com">Leeon Blog</a>此類俐东，渲染出的內(nèi)容來自自身。
inline(內(nèi)聯(lián)) 元素
HTML5 中的常見 inline 元素如下：
- inline：span订晌、strong虏辫、em
- inline-block：input、button锈拨、textarea砌庄、select、img
vertical-align
vertical-align 作用于 inline 元素 以及 table-cell 元素奕枢，還有 ::first-letter 和 ::first-line娄昆，更多內(nèi)容可以參見 MDN
屬性分類：
適用于 inline 元素的屬性：
/* keyword values */
vertical-align: baseline; /*基于基線對(duì)齊*/
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%;
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
適用于 table-cell 的屬性：
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
回到問題
問題代碼示例如下，
<style >
* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
}
img {
width: 100px;
}
div ,p {
font-size: 100px;
background-color: #fff;
}
</style>
<body>
<div >
</div>
</body>
代碼效果圖如下缝彬，紅框圈出部分為出現(xiàn)的白條
通過對(duì)代碼稍作修改可以輕松看出問題所在萌焰，實(shí)圖如下
有了上面的鋪墊，現(xiàn)在回頭看遇到的問題谷浅，就很簡(jiǎn)單了扒俯，究其原委，首先 img 元素默認(rèn)對(duì)齊方式為 vertical-align: baseline;一疯，這就導(dǎo)致了撼玄，baseline 以下的部分被空了出來，顯示了背景的白色墩邀。
問題找到了掌猛，對(duì)癥下藥可得出下面的解決方案：
- 根本上消除 img 的對(duì)齊方式 —— 塊狀化：
img {
display: block;
}
- 更改 img 對(duì)齊方式，以下三種均可
img {
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
- 更改行高眉睹，行高是兩條 baseline 之間的距離荔茬，因此可以暴力的讓行高消失
{
line-height: 0;
/* font-size: 0; 當(dāng) line-height 使用數(shù)值、百分比或者 rem 定義時(shí)也可用這種方式竹海，因?yàn)?line-height 參照的是 font-size 的值*/
}
總結(jié)
遇到問題多多求證慕蔚，即便是很常見的問題也會(huì)挖出大學(xué)問，在求證的過程中也不能盡用拿來主義站削，多參考 w3c 和 MDN 的文檔坊萝。
寫的過程中孵稽，修修補(bǔ)補(bǔ)了好幾回许起，關(guān)于 vertical-align 的內(nèi)容講的很倉促十偶，后面會(huì)補(bǔ)上，如果文中表達(dá)有誤园细，煩請(qǐng)指出惦积，感謝。
參考：
