CODEWITHSUNDEEP
htmlcss
Slasher
Slasher

Reputation: 618

How to set right spacing between inline-block elements

My example: enter image description here

Its possilble to set same spacing between div inline elements. Because auto width is not working. This is what i got so far:

HTML

 <div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
  </div>

CSS

#frame div {
    background-color: brown;
    padding-left: 20%;
    padding-right: 20%;
    width: auto;
    margin: 5px;
    display: inline-block;
}

Upvotes: 1

Views: 3540

Answers (3)

domsson
domsson

Reputation: 4681

Width of frame is full screen and width of block have to fit inside this frame, its not that important.

In that case you can avoid the not yet that well supported flex and use percentages instead:

  • Give 20% width to each of the .block divs
  • Give 4% margin-right to each of the .block divs
  • Give either the first .block an additional 4% margin-left or set a padding-left of 4% on #frame

Of course, you can change these values as long as they add up to a maximum of 100% of #frame.

#frame {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 4%;
}

#frame div {
    display: inline-block;
    background-color: brown;
    width: 20%;
    margin: 1em 4% 1em 0;
}
 <div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105943

Flex makes this easy : 

#frame div {
  background-color: brown;
  margin: 5px;
  flex: 1;
  padding:1em;
  color:silver
}

#frame {
  display: flex;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

For a single row table does the job too for older browsers :

#frame div {
  background-color: brown;
  display:table-cell;
  padding:1em;
  color:silver
}

#frame {
  display: table;
  width:100%;
  border-spacing: 10px 0;;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

or grid for latest browsers (where columns number is known:

#frame div {
  background-color: brown;
  padding: 1em;
  color: silver
}

#frame {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

Upvotes: 1

RichardB
RichardB

Reputation: 2767

Flexbox may be your best approach, but be aware that older browsers do not support it.

#frame div {
    background-color: brown;
    width: 20%;
    text-align:center;
}

#frame {
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
}

https://jsfiddle.net/02mp1yxv/

Upvotes: 1

Related Questions