[TOC]
vertical-align
一个行盒中行内块元素的对齐方式 vertical-align 会影响行内块级元素在一个行盒中垂直方向的位置
行盒
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
-
盒子沿着内容沿伸
-
行盒不能设置宽高
-
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
-
内边距（填充区） 水平方向有效，垂直方向不会实际占据空间。
-
边框 水平方向有效，垂直方向不会实际占据空间。
-
外边距 水平方向有效，垂直方向不会实际占据空间。
作用：包裹所有内容
baseline
- 文本的 baseline 是字母 x 的下方
- Inline-block 默认的 baseline 是 margin-bottom 的底部（没有，就是盒子的底部）
- Inline-block 有文本时，baseline 是最后一行文本的 x 的下方
vertical-align 的取值
- baseline(默认值)：基线对齐（你得先明白什么是基线）
- top：把行内级盒子的顶部跟 line boxes 顶部对齐
- middle：行内级盒子的中心点与父盒基线加上 x-height 一半的线对齐
- bottom：把行内级盒子的底部跟 line box 底部对齐
- <percentage>：把行内级盒子提升或者下降一段距离（距离相对于 line-height 计算\元素高度）， 0%意味着同 baseline 一 样
- <length>：把行内级盒子提升或者下降一段距离，0cm 意味着同 baseline 一样
