What is the space between these objects?



  • 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.

    введите сюда описание изображения



  • 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>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2