本文首發(fā)于個人博客 http://www.lijundong.com/image-and-line-height/
今天在做一個靜態(tài)頁面時，圖片底部出現(xiàn)一條 3px 高度的白邊，既不是 margin 也不是 padding，找了好久沒能解決，后來才發(fā)現(xiàn)與 line-height 相關(guān)，問題解決后查缺補(bǔ)漏，這里作下筆記。
解決問題之前需要理清楚幾個概念，基線、line-height、vertical-align、inline 元素。
基線(baseline)
基線(Baseline) 是字體排印學(xué)中的概念，指的是多數(shù)字母排列的基準(zhǔn)線，大多字母都沿著紅色基線排列，舉個例子輔助理解
圖中 xHh 字母的下邊緣紅線就是基線的所在，那么有沒有一個特定的條件來定義基線呢？這里有個概念可供參考
字母x的下邊緣(線)就是基線的所在。
這里又引出了 x-height 的概念，此處不表。
line-height
關(guān)于 line-height 如何定義的討論，有說法是兩條基線之間的距離，看到這個結(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; /*基于基線對齊*/
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)的白條
通過對代碼稍作修改可以輕松看出問題所在，實(shí)圖如下
有了上面的鋪墊，現(xiàn)在回頭看遇到的問題，就很簡單了，究其原委，首先 img 元素默認(rèn)對齊方式為 vertical-align: baseline;，這就導(dǎo)致了，baseline 以下的部分被空了出來，顯示了背景的白色。
問題找到了，對癥下藥可得出下面的解決方案：
- 根本上消除 img 的對齊方式 —— 塊狀化：
img {
display: block;
}
- 更改 img 對齊方式，以下三種均可
img {
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
- 更改行高，行高是兩條 baseline 之間的距離，因此可以暴力的讓行高消失
{
line-height: 0;
/* font-size: 0; 當(dāng) line-height 使用數(shù)值、百分比或者 rem 定義時也可用這種方式，因?yàn)?line-height 參照的是 font-size 的值*/
}
總結(jié)
遇到問題多多求證，即便是很常見的問題也會挖出大學(xué)問，在求證的過程中也不能盡用拿來主義，多參考 w3c 和 MDN 的文檔。
寫的過程中，修修補(bǔ)補(bǔ)了好幾回，關(guān)于 vertical-align 的內(nèi)容講的很倉促，后面會補(bǔ)上，如果文中表達(dá)有誤，煩請指出，感謝。
參考：
