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取值是以其父元素为参考。