两张img之间为什么会有空隙

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。既然你是根据 文字的基线去对齐，我直接把文字给你设没了，这样你就没法定位了吧