前言

寫(xiě)這篇技術(shù)博客時(shí)恰好看到饑人谷的任務(wù)6。拿到第一道題，是說(shuō)line-height有什么作用。題目很短，看似簡(jiǎn)單——好吧，本著一副學(xué)究樣，不查不要緊，一查嚇一跳。其中牽扯到的知識(shí)點(diǎn)還是很多滴。teren君不辭辛勞地在綜合各種資料的基礎(chǔ)上做了一番整理和修改，最終完成并分享給饑人谷的小伙伴們饕餮大餐一頓，希望各位看完后覺(jué)得還行，點(diǎn)個(gè)贊唄！

• 默認(rèn)行高下的文本效果

  
  

• 設(shè)置行高為字體大小的文本效果

• 文本層次解析

• 內(nèi)容區(qū)域

• 行內(nèi)框(inline box)
  border=10px和line-height=110px下的行內(nèi)框

border=10px和line-height=90px下的行內(nèi)框

【tip】

• 行內(nèi)框是無(wú)法直接顯示的，只能通過(guò)border側(cè)面烘托出行內(nèi)框區(qū)域
• 行內(nèi)框的高度就是行高
• 經(jīng)筆者親測(cè)，當(dāng)只設(shè)置字體高度而不設(shè)置行高的情況下，原則上行內(nèi)框是等于字體高度的，但是在chrome瀏覽器會(huì)出現(xiàn)行內(nèi)框增大的現(xiàn)象，具體解釋可能如第二張圖所示：

另一種解釋是：瀏覽器在顯示的時(shí)候往往會(huì)有自己的表現(xiàn)形式，例如在Opera內(nèi)，行高將按照CSS定義的將行距除以2增加到內(nèi)容區(qū)域的上下兩邊，而IE和Firefox則不是完全平分

• 行框(line box)
  • 行框就是所有行高當(dāng)中的最大值構(gòu)成的行內(nèi)框
    

• 行高（line-height）
  所謂的行高就是等于行與行間的基線距離的文本高度，具體演示如下：

【寫(xiě)在后面的話】
由于Teren君才疏學(xué)淺，剛?cè)腴T前端不久，如有錯(cuò)誤和缺失之處，請(qǐng)老師和同學(xué)不吝賜教。