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

Question

现在我在 Bootstrap 中有一排三个框，如下所示:

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

我的自定义 CSS 更改了内容框的大小并添加了一个边框，如下所示:

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

所有的框都紧挨着出现，并且边框相互接触，我试图在框之间添加一些空间，以免发生这种情况。我尝试过的所有方法(调整框的宽度、更改边距、在现有框之间添加空列)都会更改框的对齐方式，因此它们不再在整行中居中。

有没有办法在保持内容框居中间距的同时增加内容框之间的空间？

Answer 1

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

margin 属性可能就是您要找的