vertical-align的百分比值是相对于line-height计算的

{ line-height:100px;

 vertical-align:-50%;   //   -50px

}

多出来的空白间隙？

<div style="background:red"><img src="2.jpg" /><div>

对于内联元素，vertival-align和line-height"到处都是"

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”

如何清除这个“幽灵空白节点”？

1.让vertical-align失效

img{ display:block; }

2. 使用其他vertical-align的值

告别baseline, 取用其他属性值，比方说bottom/middle/top都是可以的。

3.直接修改line-height的值

只要行高足够小，一般设置为0

div{ line-height: 0}

4.因为line-height为相对单位，由font-size间接控制

div{ font-size: 0 }

应用-借用“幽灵空白节点”实现 任意尺寸的图片（或者内联块状化的多行文字）的垂直居中效果

<div><img src="2.png" /></div>

div{ line-height: 240px; font-size: 0}  // 行高继承给"幽灵空白节点"，类似手动添加个 <i>标签; font-size 为0实现 绝对居中

img{ vertival-align: middle }

inline-block和baseline关系

规范：

一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。

span{display:inline-block;width:150px;height:200px;border:1px solid green;background:#999}

<span></span>

<span>x-baseline</span>

文章来源：http://www.zhangxinxu.com/wordpress/?p=4925