What is the space between these objects?

[Rossere]

Hi.

One question I don't understand. The example will be clear. I'm building a slick element. <div></div> I'm putting other elements in it. <div> </div> It's so hard to keep them inside the parent. I want the objects to be cleaned. I get it that's in figure 1.

Here's the style:

.images{    
   margin:0px;
   padding:0px; 
   width:200px;
   height:200px;
   display:inline-block;
   border-radius:10px;
}
#container{

margin:0px;

padding:0px;

width:600px;

height:600px;

border:5px solid orange;

background-color:orange;

position:absolute;

border-radius:10px;;

}

I'm putting down the DOM textbooks that the browser put in between my divas. If they are removed, the divas will be placed in a box as in figure 2. But there's a gap between the top and the bottom line.

Issues:

1. What the hell is this? I've cleaned up all the extra text knots. How do we remove this gap between the lines?

2. Why does a browser put in extra text knots between my knots? That's why the developers came up with it.

[kalena]

Problem of use display:inline-block♪

Alternative solution, use display:flex on the container, with construction flex-wrap:wrap♪

.images {
  margin: 0px;
  padding: 0px;
  width: 190px;
  height: 190px;
  display: inline-block;
  border-radius: 10px;
  border: 5px solid red;
  background-color: green;
}
#container {
  margin: 0px;
  padding: 0px;
  width: 400px;
  height: 400px;
  border: 5px solid orange;
  background-color: orange;
  position: absolute;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}

<div id="container">
  <div class="images"></div>
  <div class="images"></div>
  <div class="images"></div>
  <div class="images"></div>
</div>