[CSS學習] line-height屬性講解

標籤：文本   ase   display   垂直置中   put   保留   size   需要   text   

記：本文可以作為張老師在慕課網上講解課程的學習筆記

定義

line-height:通過查MDN文檔可知

對於區塊層級元素，CSS屬性line-height指定了元素內部line-boxes的最小高度。對於非替代行內元素，line-height用於計算line box的高度。對於替代行內元素，如button/input等元素，line-height並沒有影響。

查CSS參考手冊，line-height表示字型最底端與字型內部頂端之間的距離，應該是不準確的。

張老師說：line-height表示兩條基準之間的距離

通過MDN的定義可以知道，內嵌元素的高度是由line-height決定的，並不是由字型大小決定的。

 

高度機理

1. 行高line-height具有繼承性，影響無處不在。

2. 高度的表現並不在於行高，而是在於內容地區和行間距。

內容地區高度+行間距=行高

內容地區高度只與字型和字型大小有關係

 

取值

line-height的取值有四種類型：normal  <number>  <length>  <percentage>

normal取決於user-agent，與font-family有關係。一般情況下都會在reset.css裡面重設line-height

<number>無單位元字，實際計算值=number*字型大小，首選方法。

<length>用於計算line box的高度

<percentage>與元素自身的字型大小有關，實際計算值=percentage*元素計算出的字型大小

inherit行高繼承，input等元素預設行高值為normal, 通過使用inherit可以讓文字框樣式的可控性更強

細微差別

line-height=<number>所有可繼承元素根據font-size重新計算行高

line-height=<percentage>/<length>當前元素根據font-size計算行高後繼承給子項目

 

line-height與圖片的那些事兒

如果消除圖片底部間隙的方法：

1. 圖片塊狀化，這樣就沒有基準對齊

2. 圖片設定底線對齊，預設圖片和文字是基準對齊baseline

3. 設定足夠小的行高使得基準位置上移 line-height: 0;

應用：

1. 小圖片，大文字（圖片和文字中線對齊）

保留圖片的inline特性，設定文字的字型大小及行高，同時設定圖片的vertical-align特性來實現某些效果

如img{vertical-align: bottom;}圖片和文字保持底部對齊

img{vertical-align: middle；}圖片和文字保持中線對齊

 

2. 大小不固定的圖片，多行文字垂直置中

a. 圖片的水平置中：

圖片外部容器設定 {line-height: <length>; text-align:center; }

img{ vertical-align:middle;} 圖片近視置中，細微之處在於，有隱藏的文本，所以偏差與字型和字型大小有關。

 

b. 多行文本水平垂直置中

設定外部容器{ line-height, text-align:center;}

內部文字標籤需要修改display轉換成和圖片一樣inline-block，同時重設外部繼承的text-align和line-height屬性值{text-align:left; vertical-align:middle;}

必要時設定max-width:100%;

[CSS學習] line-height屬性講解