在CSS中，line-height屬性往往是我們調整行距的方法，今天這篇文章來嘗試探讨這一屬性，首先了解幾個概念：
1. 塊級元素與行内元素：
HTML元素分為兩大類，塊級元素（包括p、h1、div等元素）以及行内元素（又稱短語元素，包括strong、span等元素）
2. 行框：
在我個人的了解中，在正常的文檔流情況下，從上到下渲染的水準單元就是行框。而行框内部是從左到右進行渲染的，行框是由行内框水準排列形成，雖然行框實際上是不存在的，但這一概念友善我們了解浏覽器解析CSS的過程。
一般來講，每個塊級元素獨占一個行框，而一行相鄰的行内元素共同存在同一個行框裡，
3. display:
display屬性用于定義建立布局時元素生成的顯示框類型,上面提及的塊級元素即display: block,而行内元素即display: inline
而将display屬性設為inline-block則稱為行内塊元素，即多個塊可以共同存在同一個行框中。
4. display: inline-block與display: inline的差別：
由上可知，我們将一個塊級元素的display屬性設定為inline-block或者inline都可以有效的将其水準地排列，兩者的差別就是： inline-block屬性保留了元素的塊特性，使得對元素改變content,padding,border,margin屬性可以有效的改變本身的行高（後面會講到這一概念），而inline屬性則沒有保留元素的塊特性，是以對元素改變content,padding,border,margin屬性無法改變的行高，隻能改變行内元素之間的水準邊距。
5. 在行内的普通文本以及行内元素，頂線、中線、基線、底線的定義如圖：
其中，頂線和底線分别是文本的最頂端和最低端，文本總是包裹在頂線和底線之間的内容區中，而基線指的是小寫字母x的下端沿，中線位于基線上方，與基線距離為半個小寫字母x的高度（即0.5ex），大部分浏覽器會認為1ex=0.5em，是以中線高于基線0.25em
6. 行高：
line-height是内容區和以内容區為基礎的對稱拓展區域的高度,一般情況下我們可以了解為相鄰文本的基線之間的距離。
5. 行高：
line-height
可能的值
| 值 | 描述 |
|---|---|
| normal | 預設。設定合理的行間距。 |
| number | 設定數字，此數字會與目前的字型尺寸相乘來設定行間距。 |
| length | 設定固定的行間距。 |
| % | 基于目前字型尺寸的百分比行間距。 |
| inherit | 規定應該從父元素繼承 line-height 屬性的值。 |
normal即預設情況下，一般浏覽器會将line-height的值設為1.2。 number可以了解為系數，在子元素繼承line-height屬性時繼承的是系數的值！例如父元素的line-height系數為1.2，繼承給了子元素，而子元素的font-size為30px，那麼此時它的行高為30*1.2=36px。
length的機關一般為em或px，在子元素繼承line-height屬性時繼承的是實際的值，例如父元素的font-size為16px，line-height為1em，那麼繼承給子元素的就是1*16=16px的line-height，%即百分比，與em機關原理相同，例如150% = 1.5em。
注意！行框中的每一個行内框都可以設定自身的行高，也都有自身預設的行高，隻有确定好行框内各元素的行高和對齊方式（稍後講到），才能确定行框的行高。
1.普通文本、行内元素的行高也即按照上圖的行高設定，對行内元素顯式地改變行高屬性也可以改變元素行高，但将line-height行高屬性設為過小的值該屬性将無效，如設定為小于該元素的字型大小值。對行内元素設定padding、border、margin屬性無法改變本身的行高
2.行内塊元素同樣對行内元素顯式地改變行高屬性也可以改變元素行高，但将line-height行高屬性設為過小的值該屬性将無效，不同的是對行内塊元素設定padding、border、margin将有效改變本身的行高。個人認為，在不設定div的行高的情況下，行内塊的行高也就是div盒子的高度也即content高度+padding高度+border高度
6.垂直居中方式：
vertical-align：
可能的值
1. 基線對齊（vertical-align : baseline） 基線對齊（vertical-align : baseline）使元素的基線同基準元素（取行高最高的作為基準）的基線對齊
2. 頂端對齊（vertical-align : top） 頂端對齊（vertical-align : top）是将元素的行内框的頂端與行框的頂端對齊
3. 文本頂端對齊（vertical-align : text-top） 文本頂端對齊（vertical-align : text-top）是将元素行内框的頂端同文本行的頂線對齊
4. 底端對齊（vertical-align : bottom） 底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反
5. 文本底端對齊（vertical-align : text-bottom）
6. 中間對齊（vertical-align : middle） 中間對齊（vertical-align : middle）通常使用在圖檔上，将圖檔的垂直方向的中線與文本行的中線對齊。（對于文字的處理有些偏差，具體依據還沒有研究出來，有研究的同學可以聯系我哦~~）
中線的定義為：中線位于基線的上方，與基線的距離為小寫字母x高度的一半 （即0.5ex）， 而ex同font-size相關，大部分浏覽器認為1ex = 0.5em（em同樣也是相對機關，不是絕對機關），是以會将基線以上四分之一em處作為中線來對齊。
7. 上标和下标 上标（vertical-align:super）使元素的基線相對于基準元素的基線升高，下标（vertical-align:sub）使元素的基線降低，移動的幅度CSS規範中沒有規定，由浏覽器來決定。
上下标不會改變元素文字的尺寸大小。
8. 長度值和百分比 和上下标類似，長度值和百分比值可使元素的基線相對于基準元素的基線升高（正值）或者降低（負值）。 上下标的移動尺寸是由浏覽器确定的，而設定長度值或者百分比，可以精确控制文字上下移動的幅度。 百分比與行高有關（line-height），例如有如下代碼，其顯示如圖7-44所示。
參考資料：https://www.cnblogs.com/qiangspecial/p/4126842.html