CSS vertical-align 屬性與基線的那些事~
定義和用法:
vertical-align 屬性設置元素的垂直對齊方式。
vertical-align只對內聯元素（inline、inline-block、inline-table）、表格單元格元素（table-cell）生效。
說明:
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
| 默認值： | baseline |
|---|---|
| 繼承性： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.verticalAlign="bottom" |
可能的值:
| 值 | 描述 |
|---|---|
| baseline | 默認。元素放置在父元素的基線上。 |
| sub | 垂直對齊文本的下標。 |
| super | 垂直對齊文本的上標 |
| top | 把元素的頂端與行中最高元素的頂端對齊 |
| text-top | 把元素的頂端與父元素字體的頂端對齊 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的頂端與行中最低的元素的頂端對齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對齊。 |
| length | |
| % | 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。 |
| inherit | 規定應該從父元素繼承 vertical-align 屬性的值。 |
使用：
在使用vertical-align 屬性時要了解清楚基線這個概念。
基線：
基線的位置並不是固定的。
-
在文本之類內聯元素中，基線是‘ 默認值：baseline ’的下邊緣位置
<div>
<span>默認值：baseline</span>
</div>
細心的朋友應該會發現，文本內容與盒子上下邊之間存在着空隙。這是因為內聯元素存在默認行高，而空隙正是被這默認行高撐開的。
-
img等元素基線也是下邊緣。
<div> 默認值：baseline <img src="images/0.gif" alt=""> <img src="images/0.gif" alt=""> </div>
img元素下邊的空隙是要和父元素的基線看齊造成的，而與第二張img之間的空隙是：它們之間存在回車、換行或者空格（解決辦法1、解決辦法2）
-
在
inline-block元素中，如果該元素內沒有內聯元素或者overflow不是visible，其基線就是margin的邊緣。
<div>
123<span style="line-height: 50px;">默認值：baseline</span>
<img src="images/0.gif" alt="">
<span style="display: inline-block; overflow: hidden;height: 80px;">xxx</span>
</div>
小結：每個行內元素的基線都要向父元素字體基線看齊。當父元素或子元素的行高和字體大小樣式改變的時候，會使得父元素基線位置改變，從而使得行內元素的位置整體上下移動。
父元素默認line-height和font-size的存在，也有可能會悄悄地影響布局。
前端小白，有哪些不足的地方，還請大家多多指教！
————————————————
資料參考：
CSDN作者：「651423」
原文鏈接：https://blog.csdn.net/u013007731/article/details/79242619
CSDN作者：「℡鞋子～特大號」
原文鏈接：https://blog.csdn.net/weixin_43599212/article/details/107584461
簡書作者：「Iam_Bling」
原文鏈接：https://www.jianshu.com/p/ce7e4a997a2c
博客園作者：「lylszo」
原文鏈接：https://www.cnblogs.com/lylszo/p/12622391.html