title: font-size changes position of element
body: <p>I've this list of buttons</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button&gt;A&lt;/button&gt;
  &lt;button&gt;B&lt;/button&gt;
  &lt;button class="special"&gt;C&lt;/button&gt;
  ....
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>button {
      background-color: grey;
      color: #fff;
      border: none;
      border-radius: 2px;
      box-shadow: 1px 1px 0 0.8px #C0CBD1;
      height: 30px;
      margin: 0;
      padding: 0;
      position: relative;
      width: 30px;
      font: 500 16px/36px sans-serif;
  }
  
  .special {
      font-size: 30px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/q640e8sc/" rel="nofollow">jsfiddle</a></p>
  
  <p>Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the <code>font-size</code> moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)</p>