vertical-align 学习思考

vertical-align属性

CSS的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
疑惑点：vertical-align取值究竟是如何取得？
我们用两个常见的属性值（top、bottom）来看下它取值的原理
1.属性值为top

top属性值
对class=box2的文本进行顶部对齐，两个span文本顶部基线一致，那么class=box2的文本对齐的是不是就是class=box1顶部基线呢？我们继续看下面的例子。
2.属性值为bottom
bottom属性值
在本例中，又增加了一个span，对class=box2的文本进行底部对齐，发现其文本顶部对齐的是class=box3的底部基线
这就有点困惑了，class=box2的文本到底和谁对齐，以什么为参考呢？
仔细发现可知，class=box2的顶部、底部对齐都在其父元素div的基线上，因为父元素未设padding，所以它的高度取决于子元素的最大高度，它被子元素给“撑开”。
所以我们可以得出结论：对于行内元素vertical-align取值是以其父元素为参考。