title: How do I make the content box of an element fit the font-size of its contents
body: <p>If you look at this codepen <a href="https://codepen.io/anon/pen/pwQrmm" rel="nofollow noreferrer">https://codepen.io/anon/pen/pwQrmm</a> </p>
  
  <pre><code>`h2 {
    padding-top:16px;
    padding-bottom:16px;
    font-size: 16px;
  }`
  </code></pre>
  
  <p>the h2 tag is set to have 16px in font-size but the height of its content box is 18px. Is there a way to set the height on the content box to match the font-size without manually setting its height with height: 16px. Also when the h2 tag becomes two lines, the content box should become 32px.</p>
  
  <p>I tried searching this problem but couldn't find any answers. I'm sorry if this has been answered before.</p>