CSS-消除图片默认间距方案

CSS-消除图片默认间距

通常我们会遇到这样的问题：
图片与图片以及文字之间会遇到中间存在默认间距：

html:

<div class="Img">
           <img src="bg1.jpg" alt/>
          <img src="bg.2jpg" alt/>
 </div>

解决方案：

有以下三种，建议只采用前两种

方案一：

将img显示设置成display:block;
因图片横向排列，同时设置向左浮动float:left;
代码如下：

css:

.Img{
  img{
    width: 100%;
    display: block;
    float: left;
  }
}

方案二：

在图片的父容器上设置字体大小为0;font-size:0;
代码如下：

css:

.Img{
  font-size: 0;
  img{
    width: 100%;
  }
}

方案三：

在图片后紧跟图片或文字，不换行;文字仅对span标签有用，
代码如下：

html

 <div class="Img">
          <img src="bg1.jpg" alt/><img src="bg2.jpg" alt/><span>随便点</span>
 </div>

Ps:欢迎讨论交流，嘻嘻🤭…