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

my example:

its possilble set same spacing between div inline elements. because auto width not working. got 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; } 

width of frame full screen , width of block have fit inside frame, not important.

in case can avoid not yet supported flex , use percentages instead:

• give 20% width each of .block divs
• give 4% margin-right each of .block divs
• give either first .block additional 4% margin-left or set padding-left of 4% on #frame

of course, can change these values long add 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>