title: Why doesn't font-size equal width and height in CSS?
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;p id="main"&gt;
      H  
  &lt;/p&gt;
  </code></pre>
  
  <p>and the following CSS:</p>
  
  <pre><code>p {
    border-style: solid;
    border-color: black;
    border-width: 1em;
    font-size: 1em;
    height: 1em;
    width: 1em;
    padding: 0em;
  }
  </code></pre>
  
  <p>Why doesn't the height and width of content box equal the font-size. Why is there a gap between the letter H and the border as in the following output.</p>
  
  <p><a href="http://codepen.io/anon/pen/ZYVbMX">Output</a></p>