次のようにブートストラップで今、私は3つのボックスの行を持っているブートストラップ

Question

にコンテンツボックスの間にスペースを追加する方法：私のカスタムCSSがコンテンツボックスのサイズを変更し、次のように境界線を追加し

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

：

.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プロパティを使用すると、

Answer 2

使用margin: top right bottom left探しているものと考えられます。 documentation を参照してください。そのようなものを追加する必要があります。

margin: 10px 0 10px 0; 

これは、上に10ピクセル、下に10ピクセルを追加します。

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

Answer 3

ブートストラップはmarginがcol-lg-4幅に含まれていない、box-sizing: border-boxを使用しています。しかし、あなたはその幅を上書きすることができますし、同様に、行の毎秒の要素にある程度のマージンを追加します。私は彼がボックスの上部と下部との間のスペースを取得しようとしていると思う

.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