inline「一」：从 image 底部白边初识 line-height
本文首發(fā)于個(gè)人博客 http://www.lijundong.com/image-and-line-height/
今天在做一個(gè)靜態(tài)頁(yè)面時(shí)，圖片底部出現(xiàn)一條 3px 高度的白邊，既不是 margin 也不是 padding，找了好久沒(méi)能解決，后來(lái)才發(fā)現(xiàn)與 line-height 相關(guān)，問(wèn)題解決后查缺補(bǔ)漏，這里作下筆記。
解決問(wèn)題之前需要理清楚幾個(gè)概念，基線、line-height、vertical-align、inline 元素。
基線(baseline)
基線(Baseline) 是字體排印學(xué)中的概念，指的是多數(shù)字母排列的基準(zhǔn)線，大多字母都沿著紅色基線排列，舉個(gè)例子輔助理解
圖中 xHh 字母的下邊緣紅線就是基線的所在，那么有沒(méi)有一個(gè)特定的條件來(lái)定義基線呢？這里有個(gè)概念可供參考
這里又引出了 x-height 的概念，此處不表。
line-height
關(guān)于 line-height 如何定義的討論，有說(shuō)法是兩條基線之間的距離，看到這個(gè)結(jié)論我首先想到第一行的行高如何處理，后來(lái)去找了資料，發(fā)現(xiàn)兩條基線之間的距離即是 line-height 這樣的結(jié)論并不準(zhǔn)確。
關(guān)于 line-height 的定義，MDN 闡述如下：
即
block 元素中， line-height 的值等于元素中高度最低的行框(line box) 的高度值。 在 non-replaced inline 元素中，line-height 的值等于行框(line box) 的高度值。 **注：** **replaced element 對(duì)比 non-replaced element**- replaced element: 例如 img、video、canvas 此類(lèi)渲染出的內(nèi)容引用外部的元素 - non-replaced element: 渲染自身的 content例如
<a href="lijundong.com">Leeon Blog</a> 此類(lèi)，渲染出的內(nèi)容來(lái)自自身。inline(內(nèi)聯(lián)) 元素
HTML5 中的常見(jiàn) 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)容可以參見(jiàn) MDN屬性分類(lèi)：
適用于 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;回到問(wèn)題
問(wèn)題代碼示例如下，
<style >* {padding: 0;margin: 0;}body {background-color: #ccc;}img {width: 100px;}div ,p {font-size: 100px;background-color: #fff;} </style> <body><div ><img src="headpic.png"></div> </body>代碼效果圖如下，紅框圈出部分為出現(xiàn)的白條
通過(guò)對(duì)代碼稍作修改可以輕松看出問(wèn)題所在，實(shí)圖如下
有了上面的鋪墊，現(xiàn)在回頭看遇到的問(wèn)題，就很簡(jiǎn)單了，究其原委，首先 img 元素默認(rèn)對(duì)齊方式為
vertical-align: baseline;，這就導(dǎo)致了，baseline 以下的部分被空了出來(lái)，顯示了背景的白色。問(wèn)題找到了，對(duì)癥下藥可得出下面的解決方案：
- 根本上消除 img 的對(duì)齊方式 —— 塊狀化：
- 更改 img 對(duì)齊方式，以下三種均可
- 更改行高，行高是兩條 baseline 之間的距離，因此可以暴力的讓行高消失
總結(jié)
遇到問(wèn)題多多求證，即便是很常見(jiàn)的問(wèn)題也會(huì)挖出大學(xué)問(wèn)，在求證的過(guò)程中也不能盡用拿來(lái)主義，多參考 w3c 和 MDN 的文檔。
寫(xiě)的過(guò)程中，修修補(bǔ)補(bǔ)了好幾回，關(guān)于 vertical-align 的內(nèi)容講的很倉(cāng)促，后面會(huì)補(bǔ)上，如果文中表達(dá)有誤，煩請(qǐng)指出，感謝。
參考：
- CSS深入理解之vertical-align
- CSS Baseline: The Good, The Bad And The Ugly
- 基線 wiki
- How CSS line-height is measured?
- Understanding the CSS box model
- Inline elements and line-height
總結(jié)
以上是生活随笔為你收集整理的inline「一」：从 image 底部白边初识 line-height的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： css之absolute
- 下一篇： Flexible 弹性盒子模型之CSS