Block, there is a gap between the block elements in the row

img Yes Block in row characteristic , There is a gap between the block elements in the row ‘

Take this code as an example

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

reason ：

Inline block element ：

There is Line break , Space , enter When waiting for operation , There will be spaces by default in browser parsing .

resolvent ：

Law 1 ：

Put two photo labels on one line

<div class="box">

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

</div>

But this is not followed Web Standards to develop （HTML Write web page structure and content ,CSS Control layout , Text / Display style of pictures, etc ）

The separation of structure and expression ：HTML Tags only build the basic structure of web pages .CSS Set all the styles of the web page .

Don't be unable to adjust the style , And modify the web page structure . Because the web page needs to be maintained later , The structure of the web page should be simple and easy to understand .

Law two ：

Parent element Settings ：font-size:0px;

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

however , If the parent element has text , Will make the text size change （ The text size becomes 0）

Law three ：

margin Set to negative

My picture here , Set up -5px that will do , Fine tune according to your picture

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

however , You need to fine tune the distance between each element , If the space is occupied （ size ） Change , You need to modify the distance between each element again .

Law four ：

The parent element is set to elastic layout ,

Subelement You have to set the width and height , No width or height , Pictures will be covered with parents （ There may be other ways to deal with ）

At the same time, the width and height are larger than the child

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

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

This can be achieved .

  Law five ：

add to float attribute （ float ）

Add to the element that needs to float , Add it to the picture here .

img {
      float: left; 
    }