0

I have a <h1> element with the following class:

.product-name {
  font-size: 36px;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
<h1 class="product-name">My awesome product </h1>

and the text renders like this:

current output

As you can see, there's some white space above and below the text. I'm trying to achieve this:

desired output

Is that achievable?

cloned
  • 6,346
  • 4
  • 26
  • 38
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • you could adjust the line-height but this will affect readability if the title can break into multiple rows. – Fabrizio Calderan Mar 16 '21 at 14:42
  • Yeah, use `line-height` – disinfor Mar 16 '21 at 14:42
  • I am sure your title's text is *not* "Asdasdasdasd"... Use real text containing characters with descenders and higher ascenders (depending on the used font, but usually y, p, g and depending on language like Ä, Ü, Ê, À, Ñ) which go below the baseline and others which extend upwards, then you'll see why what you want to achieve is not useful (not even for "My awesome product", which contains "y" and "p" - letters with descenders...). – Johannes Mar 16 '21 at 15:07

2 Answers2

0

I think you mean this. I added line-height: 1;

.product-name {
    font-size: 36px;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
    line-height: 1;
    margin-bottom: 20px;
    display: inline-block;
}
<h1 class="product-name">Aadaadf</h1>
Sato Takeru
  • 1,669
  • 4
  • 12
  • 27
  • If you don't set line-height, it is 1.5 in default. line-height: 1.5 means 1.5 times of font-size. So you can change it to 1, and it becomes 36px of your font-size. – Sato Takeru Mar 16 '21 at 14:44
0

.product-name {
  font-size: 36px;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 20px;
  margin-bottom: 20px;
  line-height: 30px; /* here */
}
<h1 class="product-name">My awesome product </h1>
casraf
  • 21,085
  • 9
  • 56
  • 91
  • How did you decide how many pixels the line-height should be? – Onyx Mar 16 '21 at 14:53
  • I eye-balled it, but you can use a lot of values here, a number without a unit should correspond to your font size, so 1 = 36px, 1.5 = 54px, etc – casraf Mar 16 '21 at 16:03