<style type="text/css">
.mystyle1 {
border: 3px solid green;
width: 3em;
padding: .5em;
margin: 5px}

.mystyle2 {
border: 3px solid red;
width: 3em;
padding: .5em;
margin: 2%}

.mystyle3 {
border: 3px solid purple;
width: 3em;
padding: .5em;
margin: 1ex }

.mystyle4 {
font-size: medium;
margin: 1em }
</style>
.....
<h3>5px Margins between boxes</h3>
<div class="mystyle4">
<span class="mystyle1">Box 1</span>
<span class="mystyle1">Box 2</span>
</div>
<p>Fixed distance between boxes</p>

<h3>1 ex Margins between boxes</h3>
<div class="mystyle4">
<span class="mystyle2">Box 3</span>
<span class="mystyle2">Box 4</span>
</div>
<p>Distance between boxes dependent on widow width</p>

<h3>2 Percent Margins between boxes</h3>
<div class="mystyle4">
<span class="mystyle3">Box 5</span>
<span class="mystyle3">Box 6</span>
</div>
<p>Distance between boxes dependent on font size</p>

....