How to set right spacing between inline-block elements - html

Question

My example:
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;
}

Answer 1

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>

Answer 2

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/

Answer 3

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>