这样一个布局：
设置了边框的div里面嵌入一个img（这里设置的max-width是为了让图片的宽适应div的宽）。
页面效果：
div与img之前产生了一个间隙，怎么回事呢？
在某博文见到这样一个回答：
好吧，这竟然是因为英文字母的尾巴，也是万万没想到啦~
本质上的原因应该是：默认vertical-align属性值为默认为baseline。即内联元素的默认垂直对齐方式是和基线对齐，并不是和底部对齐。
不过，总归是因为img是inline元素造成的。
那么，怎么解决?
方案一：既然是因为字体，那么我们可以给div设置 font-size:0 （当div内部没有文字时）
方案二：img设置 vertical-align:bottom （vertical-align 指定为非baseline——非基线，事实上vertical-align设为top或者middle都能达到同样的效果）
方案三：img设置 display:block
方案四：div设置 line-height:0 （当div内部没有文字时）
可以看到，四种方案设置之后都可以去除间隙。
这里有个关于间隙的讲解也比较详细，可参考：https://www.jianshu.com/p/7b7ae3cc2a72
