对于图片，一般都会使用 vertical-align: middle 使其与周边对齐，但是为什么使用老旧的文档声明反而是符合我们直观的显示呢？

首先，浏览器并没有所谓的“HTML 5 模式"，而是只有三种：怪异模式（Quirks)，几乎标准的模式（Limited Quirks）和标准模式（Standards），其中几乎标准的模式和标准模式之间的唯一差异在于是否对  元素给定行高（line-height）和基线（baseline）

几乎标准模式中，如果  标签所在行没有其他的行内元素，将不指定基线（baseline），  标签因此会紧贴着父元素底部在标准模式中，行框总是会包含类似字母 g，f 尾巴下伸出来的那一部分空间（针对下行字母），即使行框内并没有任何内容。因此这种情况下你看到的  跟父元素底部几个像素的间隙实际上就是为”字母尾巴“预留的

使用 XHTML Transitional Doctype 会是浏览器运行在”几乎标准模式（Limited Quirks）”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你将看到和使用HTML 5 模式同样的间隙，因为这是标准模式（Standards mode）

图片本质上就是一个内联元素（或者说 inline-block，因为本身具有宽高），所以只要你在实际工作中，有若干个具备内联性质的元素水平对齐，就会出现这种情况：