现象描述
任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高。
.box { width: 280px; outline: 1px solid #aaa; text-align: center; } .box > img { height: 96px; } <div class="box"> <img src="1.jpg"> </div>
原因解析
当前line-height计算值是20px，而font-size只有14px，因此，字母x往下一定有至少3px的半行间距（具体大小与字体有关），而图片作为替换元素其基线是自身的下边缘。根据定义，默认和基线（也就是这里字母x的下边缘）对齐，字母x往下的行高产生的多余的间隙就嫁祸到图片下面，让人以为是图片产生的间隙，实际上，是“幽灵空白节点”、line-height和vertical-align属性共同作用的结果。
解决方案
（1）图片块状化。可以一口气干掉“幽灵空白节点”、line-height和vertical-align。
（2）容器line-height足够小。只要半行间距小到字母x的下边缘位置或者再往上，自然就没有了撑开底部间隙高度空间了。比方说，容器设置line-height:0。
（3）容器font-size足够小。此方法要想生效，需要容器的line-height属性值和当前font-size相关，如line-height:1.5或者line-height:150%之类；否则只会让下面的间隙变得更大，因为基线位置因字符x变小而往上升了。
（4）图片设置其他vertical-align属性值。间隙的产生原因之一就是基线对齐，所以我们设置vertical-align的值为top、middle、bottom中的任意一个都是可以的。
以上四种解决方案的代码范例详见 https://demo.cssworld.cn/5/3-5.php
