當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

inline「一」：从 image 底部白边初识 line-height

發布時間：2023/12/2 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 inline「一」：从 image 底部白边初识 line-height 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文首發于個人博客 http://www.lijundong.com/image-and-line-height/

今天在做一個靜態頁面時，圖片底部出現一條 3px 高度的白邊，既不是 margin 也不是 padding，找了好久沒能解決，后來才發現與 line-height 相關，問題解決后查缺補漏，這里作下筆記。
解決問題之前需要理清楚幾個概念，基線、line-height、vertical-align、inline 元素。

基線(baseline)

基線(Baseline) 是字體排印學中的概念，指的是多數字母排列的基準線，大多字母都沿著紅色基線排列，舉個例子輔助理解

圖中 xHh 字母的下邊緣紅線就是基線的所在，那么有沒有一個特定的條件來定義基線呢？這里有個概念可供參考

字母x的下邊緣(線)就是基線的所在。

這里又引出了 x-height 的概念，此處不表。

line-height

關于 line-height 如何定義的討論，有說法是兩條基線之間的距離，看到這個結論我首先想到第一行的行高如何處理，后來去找了資料，發現兩條基線之間的距離即是 line-height 這樣的結論并不準確。
關于 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 對比 non-replaced element**- replaced element: 例如 img、video、canvas 此類渲染出的內容引用外部的元素 - non-replaced element: 渲染自身的 content

例如

<a href="lijundong.com">Leeon Blog</a> 此類，渲染出的內容來自自身。

inline(內聯) 元素

HTML5 中的常見 inline 元素如下：

inline：span、strong、em
inline-block：input、button、textarea、select、img

vertical-align

vertical-align 作用于 inline 元素以及 table-cell 元素，還有

::first-letter 和 ::first-line，更多內容可以參見 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;

回到問題

問題代碼示例如下，

代碼效果圖如下，紅框圈出部分為出現的白條

通過對代碼稍作修改可以輕松看出問題所在，實圖如下

有了上面的鋪墊，現在回頭看遇到的問題，就很簡單了，究其原委，首先 img 元素默認對齊方式為

vertical-align: baseline;，這就導致了，baseline 以下的部分被空了出來，顯示了背景的白色。

問題找到了，對癥下藥可得出下面的解決方案：

根本上消除 img 的對齊方式 —— 塊狀化：

img { display: block; }

更改 img 對齊方式，以下三種均可

img {vertical-align: top;vertical-align: middle;vertical-align: bottom; }

更改行高，行高是兩條 baseline 之間的距離，因此可以暴力的讓行高消失

{ line-height: 0;/* font-size: 0; 當 line-height 使用數值、百分比或者 rem 定義時也可用這種方式，因為 line-height 參照的是 font-size 的值*/ }

總結

遇到問題多多求證，即便是很常見的問題也會挖出大學問，在求證的過程中也不能盡用拿來主義，多參考 w3c 和 MDN 的文檔。
寫的過程中，修修補補了好幾回，關于 vertical-align 的內容講的很倉促，后面會補上，如果文中表達有誤，煩請指出，感謝。

參考：

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

總結

以上是生活随笔為你收集整理的inline「一」：从 image 底部白边初识 line-height的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。