图片出现空白问题

当并排多张照片，期待效果是这样的：

却出现了下面的效果

那么如何解决？这为何会发生呢？
其实这是因为我们写代码时换行造成的。
解决方案如下：

<!-- 第一种方法，既然是换行造成的，不让他换行不就行了 -->
 <img src="1.jpg" alt=""><img src="1.jpg" alt=""><img src="1.jpg" alt="">


 <!-- 第二种方法 加入注释符-->
 <img src="1.jpg" alt=""><!--
     --><img src="1.jpg" alt=""><!--
     --><img src="1.jpg" alt="">
 

 <!-- 第三种方法 将元素结束标签的">"放在下一行的开始出-->
  <img src="1.jpg" alt=""
     ><img src="1.jpg" alt=""
     ><img src="1.jpg" alt="">

 <!-- 第四种方法 将父元素设置为font-size: 0 -->
 <div style="font-size: 0;">
     <img src="1.jpg" alt="">
     <img src="1.jpg" alt="">
     <img src="1.jpg" alt="">
 </div>
 
<!-- 第五种方法 每个img元素加上float:left -->
    <div style="font-size: 0;">
        <img src="1.jpg" alt="" style="float: left">
        <img src="1.jpg" alt="" style="float: left">
        <img src="1.jpg" alt="" style="float: left">
    </div>