title: h1 element distance to border differs at top and bottom
body: <p>CSS:   </p>
  
  <pre><code>h1 {
      width: 25%;
      margin: 11rem auto;
  
      font-family: 'Baron Neue';
      font-size: 4vw;
      color: white;
      text-align: center;
  
      border-top: solid 2px white;
      border-bottom: solid 2px white;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1&gt;POTJESMARKT&lt;/h1&gt;
  </code></pre>
  
  <p>The h1 tag has <code>&lt;body&gt; &lt;/body&gt;</code> as it's parent.</p>
  
  <p>The problem is that the border on the top isn't attached to h1, while there's no padding there. What I would like eventually is about a 1rem padding between h1 and the border, at the top and bottom. I could solve this by adding padding at the bottom of h1, but if I then resize my browser window, the distance from h1 to border isn't equal anymore on top and bottom.</p>
  
  <p><img src="https://i.stack.imgur.com/uzxEE.png" alt="h1 with borders"></p>
  
  <p><img src="https://i.stack.imgur.com/ub6LO.png" alt="Chrome developer tools"></p>