title: CSS Multiple grouped elements with margins
body: <p>Take this HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="block"&gt;Hello&lt;/div&gt;
      &lt;div class="block"&gt;Hello&lt;/div&gt;
      &lt;div class="block"&gt;Hello&lt;/div&gt;
      &lt;div class="block"&gt;Hello&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the companion CSS:</p>
  
  <pre><code>div.block
  {
      float: left;
      width: 100px;
      height: 100px;
      margin: 1px;
      background: red;
  }
  </code></pre>
  
  <p>The result of this is four blocks, which have between them <strong>2 pixels</strong> of space (1px from the right margin of the left block and 1px from the left margin of the right block).</p>
  
  <p>Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.</p>
  
  <p>This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting <code>margin-left</code> to 1 pixel etc.</p>