1. 左右图片有间隔
<body style="background-color:blue">
<img width="200px" height="200px" src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg" alt="" srcset="">
<img width="200px" height="200px" src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg" alt="" srcset="">
</body>
原因：这是上面代码inline-block元素和空格结合的结果，父级元素把空格当做一个字符处理。
解决：要把空格去掉，如下：
<body style="background-color:blue">
<img width="200px" height="200px" src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg" alt="" srcset=""><img width="200px" height="200px" src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg" alt="" srcset="">
</body>
2. 上下图片有空格
<body style="background-color:blue">
<div>
<img width="200px" height="200px"
src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg"
alt="" srcset="">
</div>
<img width="200px" height="200px"
src="https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113fceedf775bafa40f4bfb0557.jpg"
alt="" srcset="">
</div>
</body>
原因：图片默认的基线对齐会在底部留有一定空隙（我们称其为幽灵空白）。
解决：
div设置 font-size：0；
img设置 display：block；
div设置 display：flex；
img设置 vertical-align: middle/top/bottom;
