（标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/）
1.块级元素(block_element)中插入一个内联块级元素(inline_block)img后,产生多余间隙
（间隙存在原因说明：对于内联块级元素img默认对齐方式是基线baseline, 可以想象在line-boxes行框盒子中存在出图片外的匿名inline-box盒子包裹文本。
文本存在line-height，所以存在间隙）
代码截图如下：
2.消除图片底部间隙几种方法
a.图片与底线对齐
b.图片元素块状化-无基线对齐
c.行高足够小，基线上移
d.消除隐匿文本字体大小
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.content {
background-color: #ccc;
margin-bottom: 5px;
font-family: "microsoft yahei";
}
.vertical_align>img {
vertical-align: top;
}
.elem_block img {
display: block;
}
.content span {
display: inline-block;
background-color: #F93636;
}
.line_height_small {
line-height: 0;
}
.box {
font-size: 0;
}
.inlie_block {
display: inline-block;
}
</style>
</head>
<body>
<p class="content ">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</p> <p class="content vertical_align">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
</p> <p class="content elem_block">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
</p> <p class="content line_height_small">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
</p> <p class="content box">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
</p> <p class="content inlie_block">
<img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>
</p>
</body>
</html>
【资料参考】
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/