如何在Bootstrap中的内容框之间添加空格

Question

Right now I have a row of three boxes in Bootstrap as follows:

<div class="row">
<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>

<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>

<div class="col-lg-4 pathBoxMain">
<h2>Content</h2>
</div>
</div>

where my custom CSS changes the size of the content boxes and adds a border as follows:

.pathBoxMain {
border: 5px solid black;
padding: 10px 0px 0px 0px;
height: 175px;
}

All of the boxes appear right next to each other with the borders touching, and I am trying to add some space between the boxes so that does not happen. Everything I have tried (adjusting the width of the boxes, changing the margins, adding empty columns between the existing ones) all change the alignment of the boxes so they are no longer centerd throughout the row.

Is there a way to add space between the content boxes while preserving the centered spacing of the boxes?

Answer 1

.pathBoxMain {
  border: 5px solid black;
  margin: 10px 0px 10px 0px;
  height: 175px;
}

The margin property is probably what you're looking for

Answer 2

Use margin: top right bottom left . See documentation So you have to add something like.

margin: 10px 0 10px 0;

This will add 10 pixels on the top and 10 pixels on bottom.

.pathBoxMain {
 border: 5px solid black;
 padding: 10px 0px 0px 0px;
 margin: 10px 0 10px 0;
 height: 175px;
}

Answer 3

As bootstrap uses box-sizing: border-box , the margin isn't included in the col-lg-4 width. However, you can override that width and add some margin to every second element in the row, like:

.col-lg-4{
    width: 32% !important;
}

div:nth-of-type(3n+2){
    margin-left: 2%;
    margin-right: 2%;
}

/* (32% width * 3 elements in a row) + 2% margin left and right = 100% width */

Bootply