CSS行高line-height的個人理解

2024-07-11 08:51:58

字體：大中小

供稿：網(wǎng)友

一、行高的字面意思

“行高“顧名思義指一行文子的高度。具體來說是指兩行文子間基線間的距離。

基線是在英文字母中用到的一個概念，我們剛學英語的時候使用到的那個英語本子每行有4條線，其中底部第二條線就是基線，是a,c,z,x等字母的地邊線。

————————頂線(top line)————————————————

——————————中線(middle line)————————————

————————————基線(base line)———————————

———————————————底線(bottom line)——————

vertical-align中有top,middle,baseline,bottom與之是有關(guān)聯(lián)的，但是具體細節(jié)如何，瀏覽器差異怎樣，我還是不是很清楚。

但是由于中午跟英文長得不一樣，所以基線的說法就像老太太穿線一一對不上眼。你理解為底線之差也不為不可。只是定義一回事，表現(xiàn)則另一回事。

二、line-height與line boxes高度

先說一個大家熟知的現(xiàn)象，有一個空的div，<div></div>,如果沒有設(shè)置至少大于1像素高度height值時，該div的高度就是個0.如果該div里面打入了一個空格或是一個漢字，則此div就會有一個高度。那么您有沒有思考過，為什么div里面有文字后就會有高度呢？

這是個看上去很簡單的問題，是理解line-height非常重要的一個問題。可能有人會認為是：文子撐開的！文子占據(jù)空間，自然將div撐開。我一開始也是這樣理解的，但是事實上，深入理解inline模型后，我發(fā)現(xiàn)，根本不是文字撐開了div的高度，而是line-height!喲證明很簡單(如下測試代碼):

css代碼：

復(fù)制代碼

上一篇：用純CSS實現(xiàn)容器內(nèi)圖片上下左右居中

下一篇：讓網(wǎng)頁圖片變灰色將彩色圖像變成灰度的三種方法