How do I achieve negative padding in CSS?

Asked 16/9, 2016 at 23:28 Answered 26/5, 2019 at 20:17

Solved html css fonts css-position padding

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.

Oscoumbrian answered 16/9, 2016 at 23:28 Comment(2)

There cannot be anything such as negative padding. If there was, then it wouldn't be padding at all. – Capita 16/9, 2016 at 23:59

I know this is not the answer to the main question, but for anyone else who might be here because of the same reason as mine, notice the <br>s in the html document too! – Newly 28/2, 2020 at 23:7

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>

Gadid answered 16/9, 2016 at 23:49 Comment(0)

Use a negative margin on the inner content to achieve the same thing as negative padding would.

Biddable answered 26/5, 2019 at 20:17 Comment(1)

Somehow I had to combine this with a negative vertical-align. – Knowledgeable 18/6, 2020 at 16:25

The one thing you didn't try is adjusting the line-height.

10.8 Line height calculations: the line-height and vertical-align properties

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.

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

<h1>Lorem Ipsun Al</h1>

Prussian answered 16/9, 2016 at 23:49 Comment(0)

The Problem

What I Have Tried

Recommended topics

Hot tags