Menu
I am looking for a way to effectively achieve negative padding in CSS.
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.
I have tried:
padding and margin to 0 for the h1 element.vertical-align.height to many different values.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.
783
The margin-bottom property is specified as the keyword auto , or a <length> , or a <percentage> . Its value can be positive, zero, or negative.
The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders. Padding values are set using lengths or percentages, and cannot accept negative values.
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>The one thing you didn't try is adjusting the line-height.
10.8 Line height calculations: the
line-heightandvertical-alignpropertiesOn a block container element whose content is composed of inline-level elements,
line-heightspecifies 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>Use a negative margin on the inner content to achieve the same thing as negative padding would.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
