title: How do I achieve negative padding in CSS?
body: <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>