所以我有这个傻瓜：
http://plnkr.co/edit/g5AZfKGeDVNAICPPt4WR
它有2个div，两个都有一个svg元素，唯一的区别是底部的svg元素有一个vertical-align: middle而顶部的没有。{/ p>
我的问题是，为什么当我向svg元素添加vertical-align: middle时父母的height是否从20px更改为18px？我的意思是，无论height属性如何，svg元素的16px都保留在vertical-align。
答案 0 :(得分：0)
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：）