title: Rem unit size in CSS
body: <p>I have a problem with rem unit in CSS. In my current project all sizes are rem. When I set an element size (like div), the displayed size is 16 px * (x) ems. But when a div contains text or headings, the displayed size is 19 * (x) ems. This happens in Chrome, FF and IE. Here's an example:</p>
  
  <p>html</p>
  
  <pre><code>&lt;header id="header"&gt;
  &lt;h1 id="header-title"&gt;Blablabla&lt;/h1&gt;
  &lt;h2 id="header-subtitle"&gt;LOL&lt;/h2&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#header {
    height: 10rem;
    padding: 2rem;
    text-align: center;
    width: 100%;
  }
  
  #header-title {
    font-size: 3rem;
    margin: 0;
  }
  
  #header-subtitle {
    font-size: 2rem;
    margin: 0;
  }
  </code></pre>
  
  <p>Why?</p>
  
  <p><strong>EDIT</strong>:
  I've not declared line-height, by default it was 12.5px. I've searched more and I found the solution: <a href="https://stackoverflow.com/a/15135142/3552129">https://stackoverflow.com/a/15135142/3552129</a></p>