前言
关于vertical-align表示内联元素相对于父元素的对齐方式。 先上结论:
- ‘inline-block’的基线是正常流中最后一个line box的基线, 除非,这个line box里面既没有line boxes或者本身’overflow’属性的计算值而不是’visible’, 这种情况下基线是margin底边缘。
- 在内联元素中存在一个空白节点,可以看作透明的没有宽度的节点,它在影响着vertical-align的作用方式
正文
关于第一点十分容易确认:
xxxx复制代码
结果应该是:
英文字母'x'的底端即为基线baseline,表现为底端对齐了左边盒子的底部,说明左边盒子的baseline为底部。
关于第二点比较不容易看明白,先来看看将右边盒子的vertical-align设置为bottom:
这里比较费解的一点就是,左边盒子并没有元素,那其底部不是应该同为底部?为什么右边对齐的时候将右边盒子的底部往下移了?
其实就是第二点,有个空白节点在这里,我们将两个盒子中间插入字符'x'后就相当于把那个空白节点替换成了'x'以便观察。
x123x xxx复制代码
结果:
这样就可以看见了,其实那个节点存在了高度因此撑高了父元素的高度,使父元素高度比盒子要高一些,因此对齐方式就存在了与预期效果的差异。而消除该差异的办法也很多:即将该节点的高度变没,或者变得足够小。 如果父元素为inline元素只需要将line-height为0,如果使block则可以将font-size为0,即可解决。
上述解决办法的原理和元素高度如何而来有关,参考前面的:关于CSS:line-height。
结尾
上班太闲了,就自己学点东西。CSS实在是太深奥了,语法简单却又难以理解。加油吧。