title: Put spacing between divs in a horizontal row?
body: <p>I have 4 divs in a horizontal row. I want to put space between the divs (using margin, I guess?), but the divs overflow their parent container when I do that.</p>
  
  <p>With zero margin, they line up nicely on one line:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height: 200px; background-color: grey;"&gt;
    &lt;div style="width: 25%; float:left; margin: 0px; background-color: red;"&gt;A&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 0px; background-color: orange;"&gt;B&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 0px; background-color: green;"&gt;C&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 0px; background-color: blue;"&gt;D&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now when I introduce a margin of 5px, the last button wraps:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:100%; height: 200px; background-color: grey;"&gt;
    &lt;div style="width: 25%; float:left; margin: 5px; background-color: red;"&gt;A&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 5px; background-color: orange;"&gt;B&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 5px; background-color: green;"&gt;C&lt;/div&gt;
    &lt;div style="width: 25%; float:left; margin: 5px; background-color: blue;"&gt;D&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I guess this is because the width attribute, when a percentage, doesn't take the margin into account for the element's total width? What's the right way to do this?</p>
  
  <p>Thanks</p>