title: Use CSS to Increase Margin Between Each Sibling
body: <p>Looking for a set of CSS rules that can layout an unknown number of siblings blocks into a staircase formation.</p>
  
  <p>Let's say I have a number of sibling DIV elements within an enclosing one:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div&gt;SIBLING 1&lt;/div&gt;
      &lt;div&gt;SIBLING 2&lt;/div&gt;
      ...
      &lt;div&gt;SIBLING n&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For an arbitrary <code>n</code> and I wish to have them laid out so that <code>SIBLING 1</code> has a margin of <code>m</code> and that <code>SIBLING 2</code> has margin <code>m+o</code> for some <code>o</code> and <code>SIBLING 3</code> has a margin of <code>m+2o</code>, until <code>SIBLING n</code> has a margin of <code>m+o(n-1)</code>. So the results should look something like this:</p>
  
  <pre><code>    SIBLING 1
        SIBLING 2
          SIBLING 3
            ...
                       SIBLING n
  </code></pre>
  
  <p>In other words the margin (margin-left in this example) increases with each sibling. It is easy to do a rule for each sibling with nth-child but is there a more generic solution?</p>