Geek Answers Handbook

How to add space between elements so that they fill their container div?

I want to add a space between the spans so that the leftmost and rightmost spaces are close to the edges of the inner div. I tried to add the following rule, but this did not affect.

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

An illustration of what I'm trying to achieve is shown below:

enter image description here enter image description here

So what am I missing?

+6
source share
2 answers

You can do this with Flexbox and 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>
+8
source

For Infos and an older browser, text-align:justify + a pseudo-element to generate an extra line can be useful. For a really old browser (IE5), turn the pseudo into a tag (span), the technique will be calm old, but still effective, where flex not available.

 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

+1
source

More articles:


All Articles