vertical-align属性值

/* 关键字值 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <长度> 值 */
vertical-align: 10em;
vertical-align: 4px;

/* <百分比> 值 */
vertical-align: 10%;

/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

其中vertical-align的百分比属性值不是相对于字体大小计算的，而是相对于line-height计算的，暴露了这两个属性的特殊关系,但是line-height取百分比的时候是根据font-size 以下讨论在HTML5文档声明下

<!doctype html>
<html>

块级元素内部的内联元素间隙

按照张鑫旭说的'幽灵空白节点' - 看不见摸不着没有宽度没有实体的空白节点

这就是vertical-align和line-height搞的鬼，虽然它们看不见，但是实际上它们无处不在啊，所以内联元素的一些诡异现象基本上可以通过矫正vertical-align和line-height来达到目的；还有要记住文字的高度是行高来决定的

<div style="background-color:red;"><img src="mm1.jpg"></div>

解决方案

直接修改line-height值

设置足够小的line-height

div { line-height: 0; }

line-height为相对单位，font-size间接控制

// 父级元素设置
div { font-size: 0; }
// 正如上面说的font-size影响line-height

vertical-align失效

img { display: block; }

也可以直接设置display或者浮动、绝对定位等

使用其他vertical-align值,适合一个块里面多个内联元素

div {vertical-align:bottom|middle|top}

内联元素垂直居中问题

由于'幽灵空白字节'的基线导致使用vertical-align:middle看似是垂直居中了，但是还是差了那么点意思，我们要解决这个问题其实很简单,改造'幽灵空白字节'

line-height: 0;
font-size: 0;
vertical-align: middle;

欢迎关注我的公众号：朕惊前端

CSS深入理解vertical-align和line-height