Come aggiungere spazio tra gli elementi in modo che riempiano il loro div contenitore?

Question

Desidero aggiungere uno spazio tra spaziature in modo che gli intervalli più a sinistra e più a destra siano vicini ai bordi del interno div. Ho provato ad aggiungere la seguente regola, ma non ha avuto alcun effetto.

span.icon-square{ 
    margin:0 auto; 
} 

span.icon-square:first-child{ 
    margin-left:0; 
} 

span.icon-square:last-child{ 
    margin-right:0; 
} 

L'illustrazione di quello che sto cercando di realizzare è il seguente:

Allora, che cosa mi manca?

Answer 1

È possibile farlo con Flexbox e justify-content: space-between.

.content { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    background: #A0C5E8; 
 
    padding: 10px 0; 
 
} 
 

 
span { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: black; 
 
}

<div class="content"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

Answer 2

Per Info e del browser più vecchi, text-align:justify + un elemento pseudo per generare una linea in più può ancora essere utile. Per browser veramente vecchio (IE5), trasforma lo pseudo in un tag (span), la tecnica è tranquilla vecchia ma comunque efficiente laddove flex non è disponibile.

div { 
 
    background:#C3DEB7; 
 
    padding:1px; 
 
} 
 
p { 
 
    background:#A0C5E8; 
 
    margin:1em auto; 
 
    width:80%; 
 
    text-align:justify; 
 
} 
 
p:after { 
 
    content:''; 
 
    width:100%; 
 
} 
 
span, p:after { 
 
    display:inline-block; 
 
} 
 
span { 
 
    border-radius: 15px; 
 
    background:#7A9FC1; 
 
    line-height:60px; 
 
    width:60px; 
 
    margin-top:1em; 
 
    text-align:center; 
 
    color:white; 
 
    box-shadow:inset 0 0 0 1px ; 
 
} 
 
span:nth-child(1) { 
 
    background:#709AC2; 
 
} 
 
span:nth-child(3) { 
 
    background:#6D93B7; 
 
} 
 
span:last-child { 
 
    background:#948798; 
 
}

<div> 
 
    <p> 
 
    <span> span</span> 
 
    <span> span</span> 
 
    <span> span</span> 
 
    <span> span</span> 
 
    </p> 
 
</div>

http://codepen.io/anon/pen/NNbXEm