1.为什么img标签上下会有间隙？
img标签本身是个行内元素，所以当多个img排在一起时，它们之间如果有回车换行或者空格就会形成空隙。
其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙。
2.如何解决？
（1）img{ display:block};（消除上下间隙）
将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img。
（2）img{vertical-align:top;}（消除上下间隙）
改变其垂直对齐方式
（3）div{ line-height:0 };（消除上下间隙）
最外层行高为0
（4）<img src="../../assets/apple1.png" style="width: 50%"><img src="../../assets/apple2.png" style="width: 50%">
多个标签写在一行（消除左右间隙）
（5）使用letter-spacing属性（消除左右间隙）
<div style="letter-spacing:-800px">
<img src="../../assets/apple1.png" style="width: 50%">
<img src="../../assets/apple2.png" style="width: 50%">
</div>
（6）img{float: left;}（消除上下左右间隙）
你一定要能够正确的解决浮动所造成的影响，而且假如你原本就打算去做文字环绕效果，那么使用浮动一定是你的不二选择。
（7）div{font-size:0};（消除上下左右间隙）
把父元素的文字大小设置为0。既然你是根据 文字的基线去对齐，我直接把文字给你设没了，这样你就没法定位了吧