关于CSS：inline vertical-align

前言

关于vertical-align表示内联元素相对于父元素的对齐方式。
先上结论：

1. ‘inline-block’的基线是正常流中最后一个line box的基线, 除非，这个line box里面既没有line boxes或者本身’overflow’属性的计算值而不是’visible’, 这种情况下基线是margin底边缘。
2. 在内联元素中存在一个空白节点，可以看作透明的没有宽度的节点，它在影响着vertical-align的作用方式

正文

关于第一点十分容易确认：

<div class="wrap-2">
      <span class="baseline first"></span>
      <span class="baseline second">xxx</span>x
</div>

结果应该是：

image.png

英文字母'x'的底端即为基线baseline，表现为底端对齐了左边盒子的底部，说明左边盒子的baseline为底部。

关于第二点比较不容易看明白，先来看看将右边盒子的vertical-align设置为bottom：

bottom对齐

这里比较费解的一点就是，左边盒子并没有元素，那其底部不是应该同为底部？为什么右边对齐的时候将右边盒子的底部往下移了？

其实就是第二点，有个空白节点在这里，我们将两个盒子中间插入字符'x'后就相当于把那个空白节点替换成了'x'以便观察。

<div class="wrap-2">
      <span class="baseline first"></span>
      <span class='help'>x123x</span> 
      <span class="baseline second">xxx</span>
 </div>

结果：

显示节点

这样就可以看见了，其实那个节点存在了高度因此撑高了父元素的高度，使父元素高度比盒子要高一些，因此对齐方式就存在了与预期效果的差异。

而消除该差异的办法也很多：即将该节点的高度变没，或者变得足够小。
如果父元素为inline元素只需要将line-height为0，如果使block则可以将font-size为0，即可解决。

上述解决办法的原理和元素高度如何而来有关，参考前面的：关于CSS：line-height。

结尾

上班太闲了，就自己学点东西。CSS实在是太深奥了，语法简单却又难以理解。加油吧。