基本概念
1.行高、行距
行高是指文字行基線間的垂直距離。那什麼是基線呢？記不記得vertical-align屬性有個baseline值，這個baseline就是基線。看張「盜圖」（選自下面的參考文章），其實我也修改了一下啦~
注意：倒數第二根是基線哦，最下面那根是底線，不是基線。
圖中兩條紅線之間的距離就是行高（line-height），上一行的底線和下一行的頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之間的關係看的右下角就一目了然了~
複製**
**如下:
半行距 = （line-height - font-size）/2
當然，半行距也可能為負值（當line-height < font-size），這時候兩行之間就會重疊，如下圖所示：
2.四種box
要說的4種盒子分別是inline box、line box、content area、containing box ~
1.inline box (行內框)：每個行內元素會生成乙個行內框，行內框是乙個瀏覽器渲染模型中的乙個概念，無法顯示出來，行內框的高度等於font-size，設定line-height時，行內框的高度不變，改變的是行距。
2.line box （行框）：行框是指本行的乙個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的乙個概念，無法顯示出來。行框高度等於本行中所有行內框高度的最大值。當有多行內容時，每一行都有自己的行框。
3.content area （內容區）：內容區是圍繞著文字的一種box，無法顯示出來，其高度取決於font-size和padding。個人覺得：內容區的高度 = font-size + padding-top + padding-bottom，有待查證，也期待小夥伴們給出答案~
4.containing box containing box：是包裹著上述三種box的box，有點繞哈~看圖
原諒我畫圖水平有限，不過仔細辨認還是能看出來的~ ^_^
二、取值
一般情況下，瀏覽器預設的line-height為1.2。可以自定義 line-height 覆蓋這個初始值，那麼該怎樣設定line-height呢？有以下5種方式：值描述
normal
預設。設定合理的行間距。
number
設定數字，此數字會與當前的字型尺寸相乘來設定行間距，即number為當前font-size的倍數。
length
設定固定的行間距。
%基於當前字型尺寸的百分比行間距。
inherit
規定應該從父元素繼承 line-height 屬性的值。
看起來如此簡單~但是，line-height是個可繼承屬性，它的繼承規則有那麼一點點複雜……
三、繼承
需要提前說明的是：line-height的大小與font-size息息相關，除了指定line-height為多少px，剩下的設定方式都是基於font-size算出來的。 下面逐個講一講~
1.inherit：這個其實沒什麼說的，繼承父元素line-height的值，所以父元素的是多少就是多少。 如果其後代元素不設定line-height 的話，也會是這個值。
2.length：假設設定 line-height 為20px，那麼該行的該行的行高就是20px，與 font-size 無關，不會隨著 font-size 做相應比例的縮放。 這個長度值（20px）會被後代元素繼承，所有的後代元素會使用這個相同的、繼承的 line-height (20px)，除非後代元素設定 line-height
3.百分比：假設自身的 font-size 為16px，line-height 設為120%。那麼其行高為：16 * 120% = 19.2px。即 line-height 是根據自身的 font-size 計算出來的。 子元素會繼承父元素的line-height，那麼它繼承的是什麼呢，百分比（120%）？還是19.2px？ 答案是後者，19.2px，即父元素line-height計算後的最終值。（這個我們稍後還會舉例子來看）
4.normal：line-height 設定為 normal 的時候，行高取決於瀏覽器的解析，一般是1.2。 與前面不同的是，line-height 設定為 normal 的元素，其子元素不再繼承其line-height計算後的最終值，而是根據子元素自身的 font-size 進行計算。見下表~
element
font-size
line-height
計算後的lline-height
body
16px
normal
16px * 1.2 = 19.2px
h132px
normal
32px * 1.2 = 38.4px
可見，子元素隨著自身 font-size 的大小而做相應比例的縮放。
純數字 如果既想要 normal 的靈活，又想設定乙個自定義的值，那就要用 純數字 啦~ 純數字方式與 normal 唯一的不同，就是數值的大小，純數字可以自己隨意設定，而 normal 的值是瀏覽器決定的。
element
font-size
line-height
計算後的lline-height
eghufex body
16px
1.516px * 1.5 = 24px
h132px
1.532px * 1.5 = 48px
其後代元素會繼承這個數值（比如 1.5），然後根據自身的 font-size 算出自身的line-height。
總結如下：
設定方式
line-height
計算後的line-height
子元素繼承的line-height
inherit
父元素的line-height值
不用計算
父元素的line-height值
length
20px
不用計算
20px
%120%
自身font-size (16px) * 120% = 19.2px
繼承父元素計算後的line-height值 19.2px，而不是120%
www.cppcns.com normal
1.2自身font-size (16px) * 1.2 = 19.2px
繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px
純數字1.5
自身font-size (16px) * 1.2 = 19.2px
繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px
四、示例
line-height百分比在面試中可能經常問到。例如你知道line-height:120%和line-height:1.2的區別嗎？
現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：
css code複製內容到剪貼簿
表示行高為26個畫素
css code複製內容到剪貼簿
表示行高為當前字型大小的120%
css code複製內容到剪貼簿
表示行高為當前字型大小的2.6倍
帶單位的行高都有繼承性，其子元素繼承的是計算值程式設計客棧，如父元素的字型大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子元素改變字型尺寸而改變行高。(例如：父元素14px，子元素12px,那麼行高就是28px，子元素雖然字型是12，行高還是父元素的行高)
css code複製內容到剪貼簿
表示行高為當前字型大小的2.6倍
不帶單位的行高是直接繼承，而不是計算值，如父元素字型尺寸為14px，行高line-height:2;他的行高為28px;子元素尺寸為12px，不需要再定義行高，他預設的行高為24px。（例如：子元素12px，他的行高是24,不會繼承父元素的28）
本文標題: css中的line-height行高屬性學習教程
本文位址: /web/css/23703.html
學習筆記 css中的line height
又已經快十天沒有寫文章了，一周一篇其實好艱難的說 本來想接著上篇事件 上篇 總結事件型別的，可是看完之後整理下還是有點亂，就一直拖著沒寫 實在是不能再拖下去了，今天就簡單說說css中我們常用但又不一定真正了解的line height屬性。行高是指文字行基線間的垂直距離。那什麼是基線呢？記不記得ver...
CSS中line height和height的區別
css中的line height一般指的是布局裡面的一段文字，上下行之間的高度，比如第一行文字頂部到第二行文字的頂部，這就為行高。height一般指的是容器的整體高度。那麼line height和height有什麼區別呢？如果乙個div容器高度是20px，字型是12px，那可以顯示完全顯示一整行的文...
CSS中line height和height的區別
line heigth是行高的意思，它決定了元素中文字內容的高度，height則是定義元素自身的高度。如 測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字p 假如定義p標籤的行高為line heigth 20px 文字在瀏覽器中顯示為一行時，這個p標籤的高度會...