Come aggiungere spazio tra scatole di contenuti in Bootstrap

Question

In questo momento ho una fila di tre scatole in Bootstrap come segue:

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

dove il mio CSS personalizzato cambia la dimensione delle caselle di contenuto e aggiunge un bordo come segue :

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

Tutte le caselle apparirà accanto all'altro con i confini toccante, e sto cercando di aggiungere un po 'di spazio tra le scatole in modo che ciò non accada. Tutto ciò che ho provato (aggiustando la larghezza delle scatole, cambiando i margini, aggiungendo colonne vuote tra quelle esistenti) cambia tutto l'allineamento delle caselle in modo che non siano più centrate su tutta la riga.

C'è un modo per aggiungere spazio tra le caselle di contenuto mantenendo la spaziatura centrale delle caselle?

Answer 1

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

La proprietà margin è probabilmente quello che stai cercando

Answer 2

Usa margin: top right bottom left. Vedi documentation Quindi devi aggiungere qualcosa di simile.

margin: 10px 0 10px 0; 

Questo aggiunge 10 pixel sulla parte superiore e 10 pixel sul fondo.

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

Answer 3

Come bootstrap utilizza box-sizing: border-box, il margin non è incluso nella larghezza col-lg-4. Tuttavia, è possibile ignorare che la larghezza e aggiungere un certo margine per ogni secondo elemento della fila, come:

.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