Zack Zack - 1 year ago 67
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 Source

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>