How do I achieve negative padding in CSS?
<p>I am looking for a way to effectively achieve negative padding in CSS.</p>

<h2>The Problem</h2>

<p>I have an <code>h1</code> element on my web page that currently has the following code associated with it:</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-css lang-css prettyprint-override"><code>h1 {
  background-color: #375E97;
  color: #FFFFFF;
  font-size: 50px;
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  height: 49px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Lorem Ipsun Al&lt;/h1&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>You can see that since I have added: <code>height: 49px;</code>, the text looks as if it is flowing into the rest of the page. I want to achieve this look, but also for the top of the text, not just the bottom.</p>

<h2>What I Have Tried</h2>

<p>I have tried:</p>

<ul>
<li>Setting both <code>padding</code> and <code>margin</code> to <code>0</code> for the <code>h1</code> element.</li>
<li>Playing with various values for <code>vertical-align</code>.</li>
<li>Setting <code>height</code> to many different values.</li>
<li>Setting all the <code>h1</code>'s parent elements' <code>padding</code> and <code>margin</code> to <code>0</code>.</li>
</ul>

<p><strong>I believe that the problem I am facing is that the top of the font I am using (and most fonts) has some space. This is why I want to be able to achieve a negative padding, to move the text up on the screen without moving the content box.</strong></p>