（一）vertical-align：指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式（注意行內元素與單元格元素）
vertical-align 屬性指定爲下面列出的值之一。
（1）行內元素的值
/* Keyword values */
//相對於父元素
vertical-align: baseline; //使元素的基線與父元素的基線對齊。
vertical-align: sub;//使元素的基線與父元素的下標基線對齊。
vertical-align: super;//使元素的基線與父元素的上標基線對齊。
vertical-align: text-top;//使元素的頂部與父元素的字體頂部對齊。
vertical-align: text-bottom;//使元素的底部與父元素的字體底部對齊。
vertical-align: middle;//使元素的中部與父元素的基線加上父元素x-height（譯註：x高度）的一半對齊。
//相對行的值，沒有基線的元素，使用外邊距的下邊緣替代。
vertical-align: top;//使元素及其後代元素的頂部與整行的頂部對齊。
vertical-align: bottom;//使元素及其後代元素的底部與整行的底部對齊。
/* <length> values 使元素的基線對齊到父元素的基線之上的給定長度。可以是負數。 */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values 使元素的基線對齊到父元素的基線之上的給定百分比*/
vertical-align: 20%;
//此百分比基於line-height的百分比，基數是line-height的值，可以是負數
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
（2）表格單元格的值
baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)：使單元格的基線，與該行中所有以基線對齊的其它單元格的基線對齊。
top：使單元格內邊距的上邊緣與該行頂部對齊。
middle：使單元格內邊距盒模型在該行內居中對齊。
bottom：使單元格內邊距的下邊緣與該行底部對齊。
可以是負數。
（二）line-height：用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。對於非替代的 inline 元素，它用於計算行盒（line box）的高度。
/* Keyword value */
line-height: normal; //取決於用戶端。桌面瀏覽器（包括Firefox）使用默認值，約爲1.2，這取決於元素的 font-family。
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;//該屬性的應用值是這個無單位數字乘以該元素的字體大小。計算值與指定值相同。大多數情況下，這是設置line-height的推薦方法，不會在繼承時產生不確定的結果。
/* <length> values */
line-height: 3em;//指定<長度>用於計算 line box 的高度。參考<長度>瞭解可使用的單位。以 em 爲單位的值可能會產生不確定的結果
/* <percentage> values */
line-height: 34%;//與元素自身的字體大小有關。計算值是給定的百分比值乘以元素計算出的字體大小。百分比值可能會帶來不確定的結果
/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;
如果文字的大小要隨頁面的縮放而變化，請使用無單位的值，以確保行高也會等比例縮放。
在使用行高的值的時候需要注意的是：使用無單位的行高可避免意外結果。長度和百分比線高度有不良的遺傳行爲。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
.green {
line-height: 1.1;
border: solid limegreen;
}
.red {
line-height: 1.1em;
border: solid red;
}
h1 {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box green">
<h1>Avoid unexpected results by using unitless line-height.</h1>
length and percentage line-heights have poor inheritance behavior ...
</div>
<div class="box red">
<h1>Avoid unexpected results by using unitless line-height.</h1>
length and percentage line-heights have poor inheritance behavior ...
</div>
<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px -->
</body>
</html>
當子元素沒有自己的line-height的時候：
當父元素的line-height是無單位的數字的時候，子元素的line-height會基於自己的font-size爲基數得到line-height的值
當父元素的line-height是百分比或者長度單位的的時候，子元素的line-height會基於父元素的font-size爲基數得到line-height的值
當父元素的line-height的值時長度，同時單位是em的時候，產生不確定的結果
