img 的间隙问题

哎呀！好久都没有写文章了。。。
在 div 内设置一张 img
会发现 img 下方出现一块间隙

Paste_Image.png Paste_Image.png

问题描述：
正如你看到的在 div 内设置一张 img
会发现 img 下方出现一块间隙

原因解析：
因为内联块元素默认文字对齐
为 baseline(基线)

解决方案：

1.更改标签的类型
    display: block;
2.设置文字的字号为 0
    font-size: 0;
3.设置垂直对齐方式
    vertical-align (除了 baseline)
4.将 img 的宽度与高度设置成百分比
    width: 100%;
    height: 100%;

Paste_Image.png