記：本文可以作為張老師在慕課網上講解課程的學習筆記
定義
line-height:通過查MDN文檔可知
對於塊級元素，CSS屬性line-height指定了元素內部line-boxes的最小高度。對於非替代行內元素，line-height用於計算line box的高度。對於替代行內元素，如button/input等元素，line-height並沒有影響。
查CSS參考手冊，line-height表示字體最底端與字體內部頂端之間的距離，應該是不准確的。
張老師說：line-height表示兩條基線之間的距離
通過MDN的定義可以知道，內聯元素的高度是由line-height決定的，並不是由字體大小決定的。
高度機理
1. 行高line-height具有繼承性，影響無處不在。
2. 高度的表現並不在於行高，而是在於內容區域和行間距。
內容區域高度+行間距=行高
內容區域高度只與字體和字號有關系
取值
line-height的取值有四種類型：normal <number> <length> <percentage>
normal取決於user-agent，與font-family有關系。一般情況下都會在reset.css里面重置line-height
<number>無單位數字，實際計算值=number*字體大小，首選方法。
<length>用於計算line box的高度
<percentage>與元素自身的字體大小有關，實際計算值=percentage*元素計算出的字體大小
inherit行高繼承，input等元素默認行高值為normal, 通過使用inherit可以讓文本框樣式的可控性更強
細微差別
line-height=<number>所有可繼承元素根據font-size重新計算行高
line-height=<percentage>/<length>當前元素根據font-size計算行高后繼承給子元素
line-height與圖片的那些事兒
如果消除圖片底部間隙的方法：
1. 圖片塊狀化，這樣就沒有基線對齊
2. 圖片設置底線對齊，默認圖片和文字是基線對齊baseline
3. 設置足夠小的行高使得基線位置上移 line-height: 0;
應用：
1. 小圖片，大文字（圖片和文字中線對齊）
保留圖片的inline特性，設置文字的字體大小及行高，同時設置圖片的vertical-align特性來實現某些效果
如img{vertical-align: bottom;}圖片和文字保持底部對齊
img{vertical-align: middle；}圖片和文字保持中線對齊
2. 大小不固定的圖片，多行文字垂直居中
a. 圖片的水平居中：
圖片外部容器設置 {line-height: <length>; text-align:center; }
img{ vertical-align:middle;} 圖片近視居中，細微之處在於，有隱藏的文本，所以偏差與字體和字號有關。
b. 多行文本水平垂直居中
設置外部容器{ line-height, text-align:center;}
內部文本標簽需要修改display轉換成和圖片一樣inline-block，同時重置外部繼承的text-align和line-height屬性值{text-align:left; vertical-align:middle;}
必要時設置max-width:100%;