1

I have the following scenario: I want a background with no padding behind a heading but certain letters - as g,p - are outside the box.

Seems pretty simple but can't find a way to include all letters seamlessly:

  • No letter portion outside background box
  • No extra space/color on top of l's or capitals for example.

Can you please help?

h2{
  background:#b2bec3;
  color:#444;
  display:block;
  font-family:'Roboto';
  font-weight:700;
  line-height:1;
  font-size:35px;
  padding:0;
}
<h2>This is a heading or a paragraph text</h2>
Giannis Dallas
  • 648
  • 2
  • 8
  • 27
  • 1
    This really isn't too practical but changing the lineheight to 1.4 would get you part of the way. Text is **supposed** to have space above and below to separate it from other text lines. – Paulie_D Mar 09 '21 at 21:35
  • 1
    this is simply impossible without JS (at least in a generic way), read this: https://stackoverflow.com/a/55978512/8620333 – Temani Afif Mar 09 '21 at 21:36
  • 1
    ^ don't forget that you have letters like `ÂÊ` and `_` – Temani Afif Mar 09 '21 at 21:38

1 Answers1

1

Like @Temani Afif said in the comment below your post, you'll have to delve into JS. Best option is to bump up your line height slightly

    line-height: 1.2;
spacemonki
  • 291
  • 2
  • 13