块，行内块元素之间存在间隙

img有行内块特点，行内块元素之间存在间隙‘

以此代码为例

 <div class="box">
    <img src="./tutu.jpg" alt="">
    <img src="./tutu.jpg" alt="">
  </div>

原因：

行内块元素：

存在换行，空格，回车等操作时，浏览器解析默认会有空格。

解决方法：

法一：

将两个照片标签放在一行

<div class="box">

<img src="./tutu.jpg" alt=""><img src="./tutu.jpg" alt="">

</div>

但是这样就没有遵循Web标准来开发（HTML编写网页结构和内容，CSS控制布局，文本/图片等的显示样式）

结构与表现分离：HTML标签只搭建网页的基本结构。CSS设置网页的所有的样式。

不要因为样式调不出来，而修改网页结构。因为后期还要对网页进行维护，网页结构要简单易懂才行。

法二：

父元素设置：font-size:0px;

 .box {
      width: 800px;
      height: 400px;
      background-color: rgb(117, 51, 216);
      font-size: 0;
    }

但是，如果父元素有文字，会让文字大小一块变化（文字大小变成0）

法三：

margin设置为负值

我这里的图片，设置-5px即可，根据自己的图片进行微调即可

  img:last-child {
      margin-left: -5px;
    }

但是，需要自己对每个元素间的距离进行微调，如果空格占位（大小）发生改变，需要把每一个元素间距离再次进行修改。

法四：

父元素设置为弹性布局，

子元素必须设置宽高，不设宽高，图片将会铺满父级（可能有其他方法处理）

同时宽高要比子级大

 .box {
      width: 500px;
      height: 300px;
      background-color: rgb(117, 51, 216);
      display: flex;
    }

    img {
   
      width: 200px;
      height: 200px;
    }

此时才能实现。

 法五：

添加float属性（浮动）

添加在需要浮动的元素身上，这里添加在图片身上。

img {
      float: left; 
    }