How do I achieve negative padding in CSS?
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>