所以我有这个笨蛋:
http://plnkr.co/edit/g5AZfKGeDVNAICPPt4WR
它有 2 个 div，它们都有一个 svg 元素，唯一的区别是底部的 svg 元素有一个 vertical-align: middle 而顶部的没有。
我的问题是，为什么当我向 svg 元素添加 vertical-align: middle 时，父元素的 height 从 20px 变为 18px？我的意思是 svg 元素的 height 保持在 16px 而不管 vertical-align 属性如何。
最佳答案
inline-block元素站在baseline如果你不重置 vertical-align .
这意味着你下面有一个小间隙，大约 0.2em，这是字母使用的空间，例如:jpq ...
一旦你重置vertical-align至 middle , top , bottom , ... , 当不再需要时，这个差距就会消失。
参见 W3C 作为引用:http://www.w3.org/wiki/CSS/Properties/vertical-align/http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align并在表格单元格内(td 或这样显示)<table>上下文:http://www.w3.org/TR/CSS2/tables.html#height-layout :)
关于css - 垂直对齐 : middle reducing height of parent container，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25248203/