title: Calculating percentage width, margin and padding of inner elements?
body: <p>I've been told that percentage width of an inner element is calculated based of the total width oh an outer element and margins and paddings of that same inner element is calculated based of a content width of an outer element. When I try do use that it doesn't work. I get everything ( width, padding and margin ) based on content width of an outer element. Here is my CSS:
  &lt;</p>
  
  <pre><code>style&gt;
  
  html {
      background: url(images/grid.gif) 5px 5px;
  }
  body {
      font: 100% Arial, Arial, Helvetica, sans-serif;
      }
  html, body{
      margin:0 auto;
  }
  .outer{
      margin:50px;
      padding:50px;
      width:300px;
      height:300px;
      background:red;
  }
  .inner{
      width:50%;
      height:50%;
      background:navy;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and here is my HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div class="outer"&gt;
  &lt;div class="inner"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get width for 50% width of my inner element to be 150px instead of 200px because padding should come into total and that 50px of an outer element padding along with 300px width should give total amount of 400px. Margin shouldn't be part of content width?? I think?
  So are margin and padding percentages different then the width percentages? </p>