一些經常使用css技巧的爲何（二）我所理解的line-height

要用到的基本術語和概念：

• 替換元素：用做爲其餘內容佔位符的一個元素，或說替換元素內容的部分並不是由文檔內容直接表示。好比img元素它由文檔自己以外的一個圖像來替換，好比input元素要由一個單選按鈕，複選框，文本輸入框等替換。替換元素多爲行級元素，行級替換元素能夠像塊級元素同樣設置width/height/padding/margin。
• 非替換元素：元素的內容自己包含在文檔中，或說其內容由User Agent在元素自己生成的框中顯示。好比一個段落p元素裏的文本自己就放在該元素內。

1. 塊級非替換元素：好比div，p，blockquote 等。
2. 行級非替換元素：好比span，i 等，注意行級非替換元素設置不了width，height，marginTop和marginBottom(緣由後面解釋)。

                          

• em框：咱們經常使用的font-size屬性與你看到的實際字體大小之間的關係由字體的設計者來肯定，這種關係設置爲字體自己中的一個em框，以下的藍色方框。因此font-size的做用是爲給定字體的em框提供一個大小（但並不能保證明際顯示的字符就是這種大小，實際的字符可能比em框更高或更矮）

　　 

• 內容區：

1. 在非替換元素中，內容區是元素中各字符的em框串在一塊兒構成的框。
2. 在替換元素中，內容區是元素固有高度+可能有的內邊距+邊框+外邊距，好比下圖img若是說它有padding，border，margin的話。

                    

• 行間距：是font-size值和line-height值之差。這個差值其實要分爲兩半分別應用到內容區的頂部和底部，稱爲半行間距。行間距只能用於非替換元素。沒錯頂線和底線構成了內容區em框。

         

• 行內框：這個框經過向內容區增長行間距來描述。

1. 非替換元素行內框的高度恰好等於line-height就是上圖的行高。
2. 替換元素行內框的高度就是其內容區的高度，由於替換元素沒有行間距。

• 行框：一行中每一個字符都有本身的行內框，行框就是包含該行中出現的行內框的最高點的最低點的最小框，也就是說行框的上邊界位於最高行內框的上邊界，行框的底邊要放在最低行內框的下邊界。

須要知道的畫外音：

• 內容區相似於一個塊級元素的盒子模型中的內容框content。
• 行內元素的背景應用於內容區及全部內邊距，邊框。
• 行內元素的邊框要包圍內容區及其全部內外邊距。
• 替換元素的內外邊距和邊框確實會影響該元素的行內框高度，相應地也會影響行框高度。能夠拿img元素想一想是否是這樣。
• 非替換元素的內外邊距和邊框對行內元素或其生成的元素沒有垂直效果（即有名的margin重疊問題）。 

這樣纔會進入正題：

part 1：爲何行級非替換元素好比span設置margin-top和margin-bottom並無什麼卵用？

你也許會說由於span不是塊級元素因此設置margin-top和margin-bottom纔會沒用，那我反問你爲什麼span設置了margin-left和margin-right就起做用呢，他們都是margin一族的啊？不知道了吧，因此真正緣由不是那麼簡單。我是從行高方面分析的，也許不徹底正確，但誰又知道css的渲染機制到底內部是怎樣或是w3c爲何要這樣規定呢...

首先你須要知道行框（說通俗點也就是行高line-height）是怎麼來的，由行內框肯定的是否是，而span這個行級非替換元素的行內框就是它的內容區（也就是它的em框，說通俗點就是font-size）+上下行間距。上面說過內容區相似於一個塊級元素的盒子模型中的內容框content，任你怎麼設置margin-top和margin-bottom，就算你設置border-top，boder-bottom，padding-top，padding-bottom都對行高沒什麼卵用。對於span來講行高只和em框，上下行間距有關。若是說盒子模型不是反映元素在文檔流中佔據位置的必要條件，畢竟行高還反映着元素在文檔流中佔據的高度。若是說span元素的內容區像img替換元素這樣內容區自己就包含着邊框，內外間距，那確實會影響該元素的行高。

part 2：利用line-height爲何會使文本或子元素的文本垂直居中？

1 <p style="height:50px;background-color:red">
2     <span style="background-color:yellow">
3          我是子元素的文本     
4     </span>
5 </p>

因爲沒有給span元素設置padding和border，此時黃色部分就是span元素的內容區啦，span元素此時繼承來的font-size爲16px（chrome下默認html的font-size爲16px），增長內容區上下的行間距使span元素的行高撐滿父元素，文本不就居中了。父元素的content內容高度爲50px，因此直接給span元素設置line-height爲50px就大功告成。不少人誤認爲這樣是把span元素居中了，其實不是的，span元素並沒移動，而是它的行高增長了。

參考：部分概念內容參考自《css權威指南》，大部分爲本身理解，如理解有誤還望各位菊苣指出好讓我迷途知返及時改正