title: Why are margin/padding percentages in CSS always calculated against width?
body: <p>If you look at the <a href="http://www.w3.org/TR/CSS2/box.html#margin-properties" rel="noreferrer">CSS box model spec</a>, you'll observe the following:</p>
  
  <blockquote>
    <p>The [margin] percentage is calculated with respect to the <strong>width</strong> of the generated box's containing block. <strong>Note that this is true for 'margin-top' and 'margin-bottom' as well.</strong> If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.  <em>(emphasis mine)</em></p>
  </blockquote>
  
  <p>This is indeed true.   But <em>why</em>?  What on earth would compel anyone to design it this way?  It's easy to think of scenarios where you want, e.g. a certain thing to always be 25% down from the top of the page, but it's hard to come up with any reason why you would want vertical padding to be relative to the horizontal size of the parent.</p>
  
  <p>Here's an example of the phenomenon I'm referring to:</p>
  
  <pre><code>&lt;div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"&gt;
    This div is 200x800.
    &lt;div style="border: 1px solid blue; margin: 10% 0 0 10%;"&gt;
      This div has top-margin of 10% and left-margin of 10% with respect to its parent.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8JDYD/" rel="noreferrer">http://jsfiddle.net/8JDYD/</a></p>