Zack Zack - 2 months ago 10
CSS Question

How do I achieve negative padding in CSS?

I am looking for a way to effectively achieve negative padding in CSS.

The Problem



I have an
h1
element on my web page that currently has the following code associated with it:



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;
}

<head>
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>

<body>
<h1>Lorem Ipsun Al</h1>
</body>





You can see that since I have added:
height: 49px;
, 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.

What I Have Tried



I have tried:


  • Setting both
    padding
    and
    margin
    to
    0
    for the
    h1
    element.

  • Playing with various values for
    vertical-align
    .

  • Setting
    height
    to many different values.

  • Setting all the
    h1
    's parent elements'
    padding
    and
    margin
    to
    0
    .



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.

Answer

It completly depends on the font you use, but in your particular case height: 34pxand line-height: 34px; do what you want:

h1 {
  background-color: #375E97;
  color: #FFFFFF;
  
  font-size: 50px;
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  text-align: center;
  
  padding: 0px;
  margin: 0 auto;
  
  height: 34px;
  line-height: 34px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>

<body>
  <h1>Lorem Ipsun Al</h1>
</body>

</html>