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

I want to add space between spans so that the leftmost and rightmost spans will be close to the edges of the inner div. I've tried to add the following rule, but it had no effect.

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

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

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

The illustration of what I'm trying to achieve is given below:

So, what am I missing?

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>

For Infos and older browser, text-align:justify + a pseudo element to generate an extra line can still be usefull. For really old browser (IE5) , turn the pseudo into a tag (span), technic is quiet old but still efficient where flex is not avalaible.

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>

Need Your Help

can't connect any view controller to any class

xcode interface-builder viewcontroller

Hye there , i was trying to connect my view controller to a class and i just can't .

Views Galleriffic pagination not show

php drupal module views themes

When I updated views module 6.x-3.x-dev not show pagination in views Galleriffic 6.x-1.x-dev. http://demo.dolphin-sch.ir/Doctor/fa/galleriffic/95 i set Use pager: Paged, 9 items and Style: Gallerif...