摘要：下的屬性值詳解以下內(nèi)容均在中測(cè)試默認(rèn)對(duì)齊方式這里作為參考系，而它的就是所要對(duì)齊的了。沒有任何變化。那改變又如何呢為了讓的清晰可見，特意添加一個(gè)的包裹著。

一直聽說line-height是指兩行文本的基線間的距離，然后又說行高等于行距，最近還聽說有個(gè)叫行間距的家伙，@張?chǎng)涡襁€說line-height和vertical-align基情四射，貴圈真亂啊。。。。。。于是通過本篇來一探究竟:)

?首先看看“有道詞典”的解析!

Leading = Line Space + Font Size(即是 行距 = 行間距 + 字體大小)
Leading: 指相鄰文本行間上一個(gè)文本行基線和下一文本行基線間的距離。
Line Space: 指相鄰文本行間上一個(gè)文本行下行線(ascent)和下一文本行上行線(descent)間的距離。

而在一些面向普通消費(fèi)者的軟件中，Leading往往是指Line Space。Leading
?在CSS當(dāng)中，Leading就是指Line Space。而CSS屬性line-height則是用于設(shè)置真實(shí)的Leading。參考

Still for each glyph, determine the leading L to add, where L = "line-height" - AD

AD是指字形ascent和descent間的距離，即是font-size。
?這里為更清晰地?cái)⒄f，我將以廣義Leading指代行間距，而狹義Leading則指代行距。
從W3C Rec中看出，line-height就是狹義Leading，而line-height的字面意思即為“行高”，推導(dǎo)結(jié)果CSS中行高即是行距。
這里我們了解到行高，行距和行間距的區(qū)別了。那接下來要介紹line-height的一個(gè)重要特性——垂直居中性。

?通過L = "line-height" - AD我們知道line-height=行間距+字形大小，字形大小我們可以通過font-size來設(shè)置，而line-height就更不用說了，而家問題是行間距所占的空間是怎樣分配的呢？
方案1:不是說行間距就是上一行的descent到下一行的ascent間的距離嗎？那直接分配到A位置就好了。

方案2:如果方案1的分配方案合理，那么分配到B位置就也是OK的。

方案3:一邊倒的分配方案太不美觀了吧！不如將行間距對(duì)半開，然后分別分配到上下兩端不就OK了嗎！

CSS采用的就是方案3。這是引用了Half-leading的概念，Half-leading = Leading/2.

Half the leading is called the half-leading. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. For example, if a piece of text is "12pt" high and the line-height value is "14pt", 2pt of extra space should be added: 1pt above and 1pt below the text (this applies to empty boxes as well, as if the empty box contained zero-height text).參考

在深入垂直居中性之前，我們先看一個(gè)容易引起誤解的示例。(其實(shí)是我自己誤解而已:()

center glyphs vertically in an inline box.

不是說好了會(huì)垂直居中嗎？你看字母x明明就在div#container中線的下方呢！
我們用空格符代替文字就可以看清楚了。

“垂直居中”是指字形所在的盒子的垂直中線與line-height所占據(jù)的盒子的垂直中線重合，不是指字形的mean line和line-height所占據(jù)的盒子的垂直中線重合。
從L = "line-height" - AD可以知道行間距可能會(huì)負(fù)數(shù)，那么垂直居中性還有效嗎？
答案是肯定的，L為負(fù)數(shù)時(shí)，Half-leading自然也是負(fù)數(shù)，只是上下兩端從增加空間變?yōu)闇p少等量空間而已。不信你看

x

"line-height"
   Value:      normal |  |  |  | inherit
   Initial:      normal
   Applies to:      all elements
   Inherited:      yes
   Percentages:      refer to the font size of the element itself
   Media:      visual
   Computed value:      for  and  the absolute value; otherwise as specified
normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for "normal" between 1.0 to 1.2. The computed value is "normal". 

?normal其實(shí)就是一個(gè)值，不過實(shí)際值則由瀏覽器決定，實(shí)際值一般在1.0~1.2之間（含兩端）浮動(dòng)。但實(shí)際真的是這樣嗎？

line-height-x-L
line-height-x-L
line-height-x-L

Chrome43的結(jié)果

14/10 = 1.4
45/40 = 1.125
92/80 = 1.15
average: 1.225 約為1.2

Firefox44.0.2

13/10 = 1.3
46/40 = 1.15
92/80 = 1.15
average: 1.2

IE9

11/10 = 1.1
46/40 = 1.15
92/80 = 1.15
average: 1.13333 約為1.1

通過小數(shù)據(jù)統(tǒng)計(jì)得出normal值的規(guī)律：

不同瀏覽器的normal值不相同;

同一個(gè)瀏覽器下，font-size值不同，normal值也會(huì)有變化;

同一瀏覽器下，font-size值相同，font-family值不同，normal值也會(huì)有變化;

normal的平均值確實(shí)是在1.0~1.2之間（含兩端），但具體到特定瀏覽器、font-family和font-size時(shí)，normal的實(shí)際值可能會(huì)大于1.2。

The specified length is used in the calculation of the line box height. Negative values are illegal. 

?設(shè)置固定值，單位可以是px、pt。好處是簡(jiǎn)單——設(shè)置是什么，line-height的實(shí)際高度就是什么。壞處是子元素默認(rèn)情況下會(huì)繼承父容器的line-height屬性，若子元素的font-size大于父容器的font-size屬性值，那么子元素的文本行會(huì)十分密集，降低可閱讀性。所以我們一般采用相對(duì)font-size實(shí)際大小來設(shè)置line-height值的方式，如默認(rèn)normal方式。

The computed value of the property is this percentage multiplied by the element"s computed font size. Negative values are illegal. 

?既然采用副作用那么大，那采用這個(gè)相對(duì)值就萬事大吉了吧！非也，首先我們要弄清楚這個(gè)的參考系是啥，另外還要明白子元素的line-height到底繼承的了哪個(gè)值，是值還是父容器實(shí)際的line-height值。

的參考系的確是font-size；

子元素繼承的是父容器實(shí)際的line-height值。也就是說父容器設(shè)置為font-size:20px;line-height:200%;，那么子元素繼承來的line-height值為40px，而不是200%。因此又回到方式的問題上了。

The used value of the property is this number multiplied by the element"s font size. Negative values are illegal. The computed value is the same as the specified value. 

?和方式一樣，以font-size作為參考系，以相對(duì)值的方式設(shè)置line-height。唯一的不同就是子元素繼承的是父容器的值，參考系自動(dòng)變更為子元素的font-size。
?其實(shí)line-height:1.2em;和line-height:1.2;是等價(jià)的。若想將參考系改為根元素的font-size，則需要采用CSS3新增的line-height:1.2rem單位了。
?根據(jù)WCAG2.0(萬維網(wǎng)內(nèi)容可存取性指南)規(guī)定“段落中的行距至少要1.5倍”，那么是否在body那設(shè)置一個(gè)就一勞永逸呢？請(qǐng)看

CSS魔法堂：深入理解line-height和vertical-align
In my dual profession as an educator and health care provider, I have worked with numerous children infected with the virus that causes AIDS. The relationships that I have had with these special kids have been gifts in my life. They have taught me so many things, but I have especially learned that great courage can be found in the smallest of packages. Let me tell you about Tyler. 
bed and whispered, “I might die soon. I’m not scared. When I die, please dress me in red. Mom promised she’s coming to heaven, too. I’ll be playing when she gets there, and I want to make sure she can find me.”

看對(duì)于h1標(biāo)題欄而言，行距太多了。于是得出如下配置：

body{line-height:1.5;}
h1,h2,h3,h4,h5,h6{line-height:1.2;}

?下面我們稍微將line-height垂直居中特性中Leading為負(fù)數(shù)的示例代碼修改一下,將font-size:90px;line-height:10px;遷移到子元素中.

x

不是說垂直居中嗎？這里就涉及到一個(gè)相對(duì)復(fù)雜的CSS垂直對(duì)齊規(guī)則——vertical-align。
注意：前方高能，需要IFC、line box作為前提知識(shí)。（可參考CSS魔法堂：重新認(rèn)識(shí)Box Model、IFC、BFC和Collapsing margins）

"vertical-align"
   Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom |  |  | inherit
   Initial:      baseline
   Applies to:      inline-level and "table-cell" elements
   Inherited:      no
   Percentages:      refer to the "line-height" of the element itself
   Media:      visual
   Computed value:      for  and  the absolute length, otherwise as specified

:設(shè)置相對(duì)于baseline的距離，正數(shù)表示位于baseline的上方，負(fù)數(shù)表示位于baseline的下方;
:設(shè)置以line-height為參考系，相對(duì)于baseline的距離，正數(shù)表示位于baseline的上方，負(fù)數(shù)表示位于baseline的下方;
baseline:默認(rèn)值。元素的基線與父元素的基線對(duì)齊；
top:把元素line box上邊框?qū)R父元素的line box上邊框；
text-top:把元素line box上邊框?qū)R父元素的ascent(即content top edge)；
super:升高元素的基線到父元素合適的上標(biāo)位置；
middle:把元素line box中垂點(diǎn)與父元素基線 + x-height/2的高度對(duì)齊;
sub:降低元素的基線到父元素合適的下標(biāo)位置；
text-bottom:把元素line box下邊框?qū)R父元素的descent(即content bottom edge)；
bottom:把元素line box下邊框?qū)R父元素的line box下邊框；
inherit:繼承父元素的對(duì)齊方式。
?怎么這么多規(guī)則要記啊？我記性不好難道到時(shí)還要挨個(gè)查嗎？其實(shí)歸納一下就OK了！

對(duì)齊操作必定涉及操作元素和參考系元素，而vertical-align的值全是指參考系元素的位置，而操作元素則以baseline或linebox上中下作對(duì)齊；

默認(rèn)對(duì)齊方式為baseline，數(shù)量值均是相對(duì)于baseline而言。

注意：vertical-align僅對(duì)inline-level和table-cell元素有效，下面示例無效是正常不過的。

I"m former
I"m latter

1.默認(rèn)對(duì)齊方式——baseline

  line-height x vertical-align
  x for reference frame

這里x for reference frame作為參考系，而它的baseline就是span#obj所要對(duì)齊的baseline了。
那么在baseline的基礎(chǔ)上的設(shè)置和

  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame


  line-height x vertical-align
  x for reference frame

2.top——把元素line box上邊框?qū)R父元素的line box上邊框
?我們將上面的示例稍微改一下

  line-height x vertical-align
  x for reference frame

確實(shí)不同了，但這無法證明是元素的line box上邊框?qū)R父元素的line box上邊框哦。那么我們改改代碼看看

  
  

    
      line-height x vertical-align
      x for reference frame
    
  
  

通過line-height:1使line box與content box/area的高度一致，雖然span#parent和span#obj的上邊框?qū)R，但還不能說明什么。

  
  

    
      line-height x vertical-align
      x for reference frame
    
  
  

沒有任何變化。那改變line-height又如何呢？

  
  

    
      
      line-height x vertical-align
      
      x for reference frame
    
  
  

為了讓span#obj的Half-leading清晰可見，特意添加一個(gè)display:inline-block的inline box包裹著span#obj。而span#parent也增大了Half-leading的高度?，F(xiàn)在可以我們清晰看到確實(shí)是span#obj的line box的上邊框?qū)R父元素的line box上邊框。（同理證明了vertical-align:bottom是把元素line box下邊框?qū)R父元素的line box下邊框；）
注意：chrome下若外層div不添加font-size:14px;line-height:1;屬性，將導(dǎo)致span#parent上有條空白間隙

原因十分簡(jiǎn)單，那是因?yàn)?b>span#parent的對(duì)齊方式是baseline，參考系是div的baseline，而div的line-height為normal，有空白間隙就是當(dāng)然的事了。通過JS就可以看清楚了。

var div = document.getElementsByTagName("div")[0]
console.log(div.childNodes[0].nodeType) // 顯示3，就是TextNode

其實(shí)除了在div上設(shè)置line-height:1之外，我們還可以在span#parent上設(shè)置vertical-align:top來解決。

  
  

    
      line-height x vertical-align
      x for reference frame
    
  
  

3.text-top——把元素的line box上邊框?qū)R父元素的ascent(即content top edge)

  
  
 
      *
      x for reference frame
    
  
  

  
  
 
      
      *******
      
      x for reference frame
    
  
  

4.middle——把元素line box中垂點(diǎn)與父元素基線 + x-height/2的高度對(duì)齊

  
  
 
    
      *******x for reference frame
    
  
  

注意
當(dāng)元素的display:inline-block/inline-table等對(duì)應(yīng)的是atomic inline-level box時(shí)，其line box高度為margin box的高度。若元素對(duì)應(yīng)的是inline box，則其最小高度為line-height，最大則由子盒子決定。

?由于我工作中沒有適配IE8等歷史瀏覽器的需求，因此詳細(xì)內(nèi)容請(qǐng)參考@張?chǎng)涡竦腃SS vertical-align的深入理解(二)之text-top篇
?簡(jiǎn)單來說IE5.5~IE8下vertical-align:text-top是把元素的ascent對(duì)齊父元素的ascent(即content top edge)

?到這里理論部分已經(jīng)介紹完了，是時(shí)候通過示例來驗(yàn)證自己了！

    
    

        字體大小14px
    


    
    

      * 字體大小為14px字體大小為30px
    

   第一行文本
the second one. 

尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來自：http://www.cnblogs.com/fsjohnhuang/p/5307706.html^_^肥子John

深入了解css的行高Line Height屬性
我對(duì)CSS vertical-align的一些理解與認(rèn)識(shí)（一）
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友關(guān)系
css行高line-height的一些深入理解及應(yīng)用
大小不固定的圖片、多行文字的水平垂直居中
深入理解 CSS 中的行高與基線