title: Calculating Margin & Padding Height in Fluid / Responsive Layout
body: <p>I understand how to calculate <code>margin-left</code>/<code>padding-left</code> and <code>margin-right</code>/<code>padding-right</code> in a fluid/responsive layout. But what about <code>margin-top</code>/<code>padding-top</code> and <code>margin-bottom</code>/<code>padding-bottom</code>?</p>
  
  <p>For example, I have this code:</p>
  
  <pre><code>header h1{padding:10px 0 0 15px;}
  </code></pre>
  
  <p>When I convert this to a fluid layout get this:</p>
  
  <pre><code>header h1{padding:10px 0 0 8.823529411765%;}
  </code></pre>
  
  <p>How do I convert the padding-top? By diving by 16px (the body font size)? When I do that, the result is more than 10px effective.</p>