如何在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 属性可能就是您正在寻找的