div里面放一个img之后，下面的布局就会跟img之间有个空隙，刚开始以为是回车造成的，可是去掉之后也不起作用
原因
img属于inline-block也就是行级块元素，凡是带有inline属性都具有文字类特性，为了正确显示带有尾巴（比如j、q、y等）英文字母，就在下方留了一些空白的地方
解决办法
通过修改img自身属性
1.将img变为块级元素
img { display: block; }
2.设置img的vertical-align为除baseline以外的值
3.将img的高度设置成跟父级div一样的高度；
缺点：该方法不够灵活，一旦img尺寸改变，我们要重新设置div的高度
通过修改父级元素属性
1.将父级元素的font-size设置为0
div { font-size: 0; }
2.将父级元素的line-height设置为0
div { line-height: 0; }
