How to get rid of unwanted padding on top and bottom of any html tag (div, p, span) when writing text inside

Question

I want to create a div, p or span that contains some text with a colored background and I wanted to make the div, p or span fits exactly the words inside of it. here's what I tried doing:

.bigHeader {
  font-size: 150px;
  width: 300px;
  height: fit-content;
  background-color: #FA7268;
  color: white;
}

<p class='bigHeader'>Text</p>

padding right and left are exactly as I want, but padding top and right aren't exactly as I excpected.

here's what I got:

and here's what I want:

regardless of the different sizes, shortly I want the padding top and bottom to disapear.

it's just cause I'm using react, it has nothing to do with that, thank you mate. — AIMEUR Amin, Nov 18 '19 at 15:33
Try to use this text and you will want to keep that space: `ÂÊrjkp` — Temani Afif, Nov 18 '19 at 15:35
check this to understand what I mean: https://jsfiddle.net/g7xfr2za/2/ — Temani Afif, Nov 18 '19 at 15:40
Yes I know but I don't have any accents on my text and I really need it that way, thank you mate — AIMEUR Amin, Nov 18 '19 at 15:41
and to understand what is happening and probably fix this, you can read this: https://stackoverflow.com/a/55978512/8620333 — Temani Afif, Nov 18 '19 at 15:42

score 4 · Accepted Answer · answered Nov 18 '19 at 15:34

You need to use line-height:

.bigHeader {
  font-size: 150px;
  width: 300px;
  height: fit-content;
  background-color: #FA7268;
  color: white;
  line-height: 110px;
}

<p class='bigHeader'>Text</p>

It may be useful to set a percentage font size on html and body (we use 62.5% where I work) and then use REM units for font-size and line-height. This ensures your sizing stays constant.

How to get rid of unwanted padding on top and bottom of any html tag (div, p, span) when writing text inside

1 Answers1