title: Remove white space between <h2> border and content
body: <p>Let's consider this simple code: </p>
  
  <p><strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h2&gt;Some text&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When rendered, a white space between the <em>h2</em> upper/lower borders and the upper/lower borders of the text shows. Is there a way to remove this white space?</p>
  
  <p>I've been able to achieve that giving a fixed value to the <em>line-height</em> property; however, this solution seems to me me a bit too 'forced'. How can I achieve the same in a more 'natural' way?</p>