All geek questions in one place

How to achieve negative padding in CSS?

I am looking for a way to effectively achieve negative padding in CSS.

Problem

I have an element h1on my webpage 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>
Run code

You can see that, as I added:, the height: 49px;text looks as if it merges into the rest of the page. I want to achieve this look, but also for the top of the text, and not just for the bottom.

What i tried

I tried:

  • Set h1values paddingand marginin 0.
  • A game with different meanings for vertical-align.
  • Setting heightfor different values.
  • h1 padding margin 0.

, , , , ( ) . , , .

+5
3

, height: 34px line-height: 34px; , :

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>
+5

, line-height.

10.8 : line-height vertical-align

, line-height .

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>
+1

Use a negative field for internal content to achieve the same as for negative content.

0
source

Source: https://habr.com/ru/post/1654874/

More articles:


All Articles