How to separate one DIV from another in HTML?-CodePudding

Note that in the code below I have several div with a "responsive" class, there is some way to be separating the first horizontal column from the second, as the boxes are very close to each other. And in the field that has the text in the images, it has a lot of spaces up and down, how can I adjust?

I'm learning and I don't know much about technical terms in HTML.

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <h2>Responsive Image Gallery</h2>

  <h4>Resize the browser window to see the effect.</h4>

  <div >
    <div >
      <a target="_blank" href="img_5terre.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>


  <div >
    <div >
      <a target="_blank" href="img_forest.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div >
    <div >
      <a target="_blank" href="img_lights.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div >
    <div >
      <a target="_blank" href="img_mountains.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div >
    <div >
      <a target="_blank" href="img_5terre.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Cinque Terre" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>


  <div >
    <div >
      <a target="_blank" href="img_forest.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Forest" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div >
    <div >
      <a target="_blank" href="img_lights.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Northern Lights" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div >
    <div >
      <a target="_blank" href="img_mountains.jpg">
        <img src="https://thumbs.dreamstime.com/b/lugares-bonitos-da-vila-de-itália-de-manarola-terre-de-cinque-75217403.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div >Add a description of the image here</div>
    </div>
  </div>

  <div ></div>

  <div style="padding:6px;">
    <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller
      than 500px, the images will stack vertically (100%).</p>
    <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
  </div>

</body>

</html>

CodePudding user response：

You can add more space beneath the boxes by adding some margin-bottom to your responsive class:

.responsive {
    margin-bottom: 30px; /* Adjust accordingly */
}

You can also reduce the amount of space above and below the text by adjusting the padding for your desc class:

div.desc {
    padding: 5px; /* Adjust accordingly */
}