Leave a gap for each div box - HTML-CodePudding

I am doing create 4 items per row photo gallery section to display product catalogs. Now I have problem to make a gap for each div box, below is my sample coding:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div >
    <div  style="border:1px solid black;display: flex;column-gap: 20px;justify-content: space-between;">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black;display: flex;column-gap: 20px;justify-content: space-between;">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black;display: flex;column-gap: 20px;justify-content: space-between;">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black;display: flex;column-gap: 20px;justify-content: space-between;">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black;display: flex;column-gap: 20px;justify-content: space-between;">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
</div>

If I have no add gap code in HTML, below is original code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div >
    <div  style="border:1px solid black">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  style="border:1px solid black">
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
</div>

Actually, I want the expected result like below the sample picture:

CodePudding user response：

Way I would do it is that I would put another <div> inside <div > and remove border then wrap content inside it. That way you get spacing from bootstrap (15px by default) and you can style your inner div.

.inner-div {
  border:1px solid black
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div >
    <div >
    <div >
      <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
      <p style="text-align: center;">Add a description of the image here</p>
    </div>
    </div>
    <div >
    <div >
      <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
      <p style="text-align: center;">Add a description of the image here</p>
    </div>
    </div>
</div>

CodePudding user response：

Just add margin to your div with inline style or by creating new css class.

.row  div  img
{
  border:1px solid black;
  margin : 3px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div >
    <div  >
      <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  >
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  >
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  >
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
    <div  >
    <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg" style="width: 100%;" />
    <p style="text-align: center;">Add a description of the image here</p>
    </div>
</div>

CodePudding user response：

The following layout is probably what you want:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div >
        <div >
            <div style="border:1px solid black" >
                <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg"
                    style="width: 100%;" />
                <p style="text-align: center;">Add a description of the image here</p>
            </div>
        </div>
        <div >
            <div style="border:1px solid black" >
                <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg"
                    style="width: 100%;" />
                <p style="text-align: center;">Add a description of the image here</p>
            </div>
        </div>
        <div >
            <div style="border:1px solid black" >
                <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg"
                    style="width: 100%;" />
                <p style="text-align: center;">Add a description of the image here</p>
            </div>
        </div>
        <div >
            <div style="border:1px solid black" >
                <img src="https://www.youloveit.com/uploads/posts/2020-01/1579295763_youloveit_com_frozen_2_official_hd_art_big_images01.jpg"
                    style="width: 100%;" />
                <p style="text-align: center;">Add a description of the image here</p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>

</html>

And a fiddle if you need: JSFiddle

The same would be easier in Bootstrap5, it has better support for gutters. But this should work with Bootstrap4.

Edit: Just saw that nemus gave a similar answer, and before me. But I'll keep mine here just for the sake of it.