title: Different button sizes depending on which unit I'm using. Why?
body: <p>OK, this is most probably basic web development 101, but can someone explain to me why these two buttons aren't the same size? The only difference is that the first button is using the <code>em</code> unit and the second button is using <code>px</code>. </p>
  
  <p><a href="http://jsfiddle.net/c_vilander/yzvS8/" rel="nofollow">jsFiddle</a> (Demo)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button type="button" class="em"&gt;em&lt;/button&gt;
  
  &lt;button type="button" class="px"&gt;px&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 100%;
  }
  
  .em {
    position: relative;
    width: 9.375em; /* 150px */
    height: 3.125em; /* 50px */
    background: #18a397;  
    text-align: center;
    margin: 1em;
    box-sizing: content-box;   
  }
  
  .px {
    position: relative;
    width: 150px; /* 9.375em */
    height: 50px; /* 3.125em */
    background: #18a397;  
    text-align: center;
    margin: 16px;
  }
  </code></pre>
  
  <p>If I change the first button to a div instead, for example like this: <code>&lt;div class="em"&gt;em&lt;/div&gt;</code> the element gets resized to the same size as the second button.</p>
  
  <p>So, for some reason, there's a difference between using <code>px</code> and <code>em</code> together with <code>&lt;button&gt;</code> - but I don't know what and why ...? </p>
  
  <p><strong>Tested in:</strong> Safari 7, Chrome 31.0.1650.63 and Firefox 26.0.</p>