vertical-align

MDN連結：https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

張鑫旭：
我對css-vertical-align的一些理解與認識（一）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
CSS vertical-align的深入理解(二)之text-top篇：

https://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%e7%9a%84%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%ef%bc%88%e4%ba%8c%ef%bc%89%e4%b9%8btext-top%e7%af%87/

vertical-align的值：

vertical-align: baseline;       /* 基線 */
vertical-align: sub;            /* 下標基線 */
vertical-align: super;          /* 上標基線 */
vertical-align: text-top;       /* 字型頂部 */
vertical-align: text-bottom;    /* 字型底部 */
vertical-align: middle;         /* 基線+(x-height/2) */
vertical-align: top;            /* 整行的頂部 */
vertical-align: bottom;         /* 整行的底部 */

/* length：基線+給定的長度 */
vertical-align: 10em;
vertical-align: 4px;

/*percentage： 基線+（line-height的給定百分比） */
vertical-align: 20%;

vertical-align: inherit;    /* 從父元素繼承 */
vertical-align: initial;    /* 初始值 */
vertical-align: unset;     /* inherit & initial */
 

基線（baseline）：

PS：

length和percentage有正負之分：
當為正數時是基線之上；
當為負數時是基線之下。