CODEWITHSUNDEEP
htmlcssfontscss-positionpadding
Zack
Zack

Reputation: 1617

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:

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.

Upvotes: 15

Views: 36106

Answers (3)

stackers
stackers

Reputation: 3270

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

Upvotes: 4

Michael Benjamin
Michael Benjamin

Reputation: 371271

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>

Upvotes: 3

Johannes
Johannes

Reputation: 67778

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>

Upvotes: 14

Related Questions