目錄
問題引入
height與line-height是什麼？
height與line-height的作用物件是什麼？
height與line-height之間存在什麼關係？
必要基本術語和概念 名詞
概念 字型
作用的過程
height的作用過程
line-height的作用過程 總結
注：height：height 屬性設定元素的高度。行內非替換元素會忽略這個屬性。
line-height：設定行高。所有元素都可以使用。總結部分有對它的總結
height：塊級元素本身內容框。
line-height：塊級元素內的匿名文字和行內元素的行內框。它首先會影響行間距，改變行內框的高度，進而間接影響行框的高度。
兩者之間並沒有直接關係，只是因為大小的不同而產生視覺上的效果。
在深入理解之前先來補充一些別要的概念才能幫助我們更好的去理解乙個東西。
左邊的line-height可以忽略，重要的是右邊的。具體文章看真正的能理解css中的line-height，height與line-height
要深入了解，必須要知道它們作用的詳細的過程
對於所有塊級元素都可以設定它們內容框的高度，但要注意只允許為非負值。
確定各行內的行內元素或匿名文字的行內框高度
主要計算分為兩部分，一部分是根據內容區的高度（這裡使用者**決定最終值，如果以em框合併的方式則高度為font- size，見上面），另一部分則是通過line-height-font-size=行間距，半間距分別加到內容區的頂端和底端。最終內容區的高度就是：行間距+內容區高度
2.確定基線的位置並對齊
這個過程一般是由瀏覽器處理完成，確定各個元素和匿名文字的基線位置，以及行的基線，並將各個元素或者匿名文字放到行的基線上。另外內容區需要確定它
3.對指定vertical-algin的元素的行內框進行偏移。（本文未涉及）
詳細見vertical-algin的說明
4.確定行框的高度（以上都是對行內元素的影響過程）
由上面對行框的定義，可以簡單的說，行框的高度等於：最高的行內框的頂端到基線的距離+最低行內框的底端到基線的距離。
5.行框效果的疊加（這也是對塊級元素影響的過程）
好多文章中都指出，在不設定height的情況下，元素的高度由line-height決定，根據上面的內容我們可以更加詳細的解釋，預設情況下，塊級元素的高度由其內容的高度來決定也就是height：auto；。行框也屬於一種」塊級「元素，它當中包含了許多匿名文字和行內元素，並且由它們決定自身高度，這樣行框的高度就會把元素高度height撐起來。看一下圖理解的更快。
line-height:儘管所有的元素都具有該屬性，但實際上，只直接影響行內元素和其他行內內容而不直接影響塊級元素，也就是說可以為乙個塊級元素設定line-height值，但是這個值只應用到塊級元素的內聯內容才會有視覺效果。(line-height具有繼承性）。
紫色：塊級元素的內容框
黑色：行框
藍色：內容區
紅色：半間距
橙色：基線
注：原諒我。。我真的不會畫畫。。
然後我們就可以想一下為什麼line-height與height指不同帶來垂直方向上的顯示情況？
例如：height其餘兩種情況可以自己試試。不過似乎應該，我們經常用到的是相等的情況。
line height 與 height 的區別
line height是行高的意思，它決定了元素中文字內容的高度，height則是定義元素自身的高度。舉例 第一種情況 使用height 結果 第二種情況 行高為50px和文字高度為 20px 情況 這時候文字會居中顯示 對於文字為什麼會居中顯示問題解釋如下 我們把line height設定為 50...
關於line height設定
乙個小小屬性就有那麼多的學問，我們來一起了解一下關於line height設定 行高有五種設定方法inherit normal 百分比 固定大小 純數字 如果使用百分比的話，只會根據父元素font size來計算的行高，且它的子元素僅僅繼承父元素的行高，而不能根據自己的font size來計算的行高...
textblock的LineHeight的調整
原文 textblock的lineheight的調整 在上面的 textblock控制項中允許huanhang，也就是說some 和 text將分行顯示，會發現some和text的行距，會很寬，要調整他們之間的行距，即便是設定 lineheight為50，發現調整的幅度也是很小，也無法縮小行距。如果...