现象：
<!doctype html> <html> <head> <title>父容器高度大于子图片高度</title> </head> <body> <select id="lineselector"> <option value="baseline">baseline</option> <option value="sub">sub</option> <option value="super">super</option> <option value="top">top</option> <option value="text-top">text-top</option> <option value="middle">middle</option> <option value="bottom">bottom</option> <option value="text-bottom">text-bottom</option> </select> <script type="text/javascript"> document.querySelector("#lineselector").onchange = function(){ document.querySelector("#line").style.verticalAlign = this.value; document.querySelector("#image").style.verticalAlign = this.value; } </script> <div style="border: 1px blue solid;"> <div id="line" style="position: relative; height: 0px; 0px; display: inline-block; overflow: visible; vertical-align: baseline;"> <div style="position: absolute; height: 1px; 99999px; background: gray; overflow: hidden;"> </div> </div> <img id="image" src="http://www.baidu.com/img/bdlogo.gif" style="border: 1px red solid;"/> </div> </body> </html>
（不知道怎么在博客里插入js）
div高度比图片高度大。
原因：img是inline元素，有假想元素。基于baseline定位时，父容器高度为假想元素的下半部分高度+图片高度。
解决方法：即消除假想元素影响。可以是 img { display: block; }; 可以是 div { line-height: 0}; 可以是img { vertical-align: middle//也可以是其他值 }; 可以是 div { font-size: 0};
感谢：Along和小黄鱼提供的帮助。
参考：http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html#2679273