1. 属性定义
先来看下官方定义：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
重点：
- line box
- inline-level element
理解：
如图所示
- inline box:
每个灰色的框框都是一个inline-level element，即通常所说的display:inline以及display:inline-block的元素；inline-level element各自有个inline box; - line box:
红色框范围内即是line box;
关于 line box 盒子更详细的可以看看这篇CSS float浮动的深入研究、详解及拓展(一)
2. 取值
取值很多：
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
本文重点关注baseline 和 middle；
1. baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
重点：
- baseline
理解：
-
baseline
直接看图。如图所示
图2
定义里提到如果盒子没有baseline，则将盒子的margin底部和linebox的baseline对齐。可以在这将没有baseline 的盒子的margin底部所在线理解为它的baseline方便后续理解。我们来看个例子。
<p class='p1'>
<span>xixi</span>haha
</p>
<p class='p2'>
<span></span>haha
</p>
<p class='p3'>
<span>xixi</span>haha
</p>
span{
display: inline-block;
background: #eee;
height:50px;
width:40px;}
.p3 span{
overflow: hidden;}
如图所示 中图和右图的基线位置一致。这里提下overflow的value为visible之外的值的情况下inline-block表现的和里面是空的情况一样，baseline是它的margin底部。
另外我试了下几个常见的元素,图片元素 textarea的margin底部就是它的基线。 input[type=text]的基线是其内部文字的基线，不管有没有输入文字。
2. middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
重点：
- midpoint
- x-height
理解：
- midpoint vertical midpoint就是垂直中点
- x-height见图2上的x-height的高度。line box 的baseline 是会随着inline box的 vertical align的值改变而改变的。我得出个不成熟的结论。比如Line box里有a b c 几个inline box; 当linebox 的上边缘是由a 撑起的时候，对b c 更改vertical align并且此时不涉及到改变line box的上边缘的话，无论bc 怎么改，line box的baseline不会发生改变。而改变a的vertical align时 line box的baseline会改变。
这里先拿空元素举个栗子：
.s1{
height: 50px;
}
.s2{
height: 60px;
}
.s3{
height: 59px;
}
当左右两个span的vertical-align 改成 top bottom middle等不涉及到更改Linebox上边缘时候linebox都不会改变。但是当其设置为100%时会更改line box的baseline。（向上移动100%自身高度）。直接改变中间的s2的vertical 也会导致baseline发生变化。
回到middle来。middle按照定义是将元素垂直中心点对齐baseline加上1/2 x-height的高度。1/2 x-height就可以理解成‘x’交叉的那个点的高度咯。
<p class='p1'><span class="s1"></span><span class="s2"></span>xi</p>
<p class='p2'><span class="s1"></span><span class='s2'></span>xi</p>
.s1{
height: 30px;
}
.s2{
height: 60px;
}
p{
float: left;
margin-left: 10px;
}
.p1 .s1{
vertical-align: middle;
}
.p2 .s2{
vertical-align: middle;
}
- 右图所示 linebox的baseline发生了变化，来使得s2的中心点对齐line box的baseline 加上‘x’的一半高度呢。
3. 常见的间隙
<div><span></span></div>
<div><span></span><i>xixi</i></div>
div{
background: #eee;
width: 60px;
float: left;
margin-left: 10px;
}
span,i{
display: inline-block;
}
span{
width: 20px;
height: 60px;
background: #ddd;
}
i{
background: #ccc;
}
- 如图所示外部容器和span之间是有一段小间隙的。i标签占据的高度是由它的line-height决定的。因为基线要对齐，所以下移；那左边没有文字为啥这样呢。因为每行的linebox初始位置都有一个宽度为0的字符，规范上将这个称作strut。
完结撒花嘻嘻(●'◡'●)。
参考资料
深入理解 CSS：字体度量、line-height 和 vertical-align
我对CSS vertical-align的一些理解与认识（一）
Vertical-Align: All You Need To Know
