盒子中插入图片后，底部出现空白缝隙问题

在块级盒子中直接插入图片后，盒子的底部会出现空白缝隙。
如图所示。（给盒子加了边框方便看清。）

这个问题的原因是图片img属于行内块元素，行内块元素默认与文字的基线对齐。文字的基线和底线还有一定的空隙，这个空白缝隙就是因此出现的。

解决方法：
1、将图片转化为块级元素：display：block；
2、给图片设置vartical-align任意属性（baseline（默认值基线对齐）除外）。
3、给父盒子设置字体大小font-size：0；