CODEWITHSUNDEEP
css
Alex Lomia
Alex Lomia

Reputation: 7235

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:

enter image description here enter image description here

So, what am I missing?

Upvotes: 29

Views: 204506

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105893

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 or unwanted.

edit : there is nothing here about text-justify if you ever read too fast ;)

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

Upvotes: 7

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 51

Related Questions