CODEWITHSUNDEEP
css
Essam Al-Mansouri
Essam Al-Mansouri

Reputation: 1049

Is it possible to align text to bottom of line-height?

I was looking through material design specs, and I saw that they have text with line-height 20px and font-size: 14px, but the text is still aligned to the bottom.

I tried copying that but it was way more complicated than I thought it would be. Let me show you.

.a {
  background-color: rgba(0,0,0,0.1);
  line-height: 40px;
  font-size: 24px;
}

.b {
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  
}
.b > p {
  background-color: rgba(0, 0, 0, 0.2);
  display: block;
  padding: 0;
  margin: 0;
  font-size: 24px;
  line-height: 56px;
  
  transform: translateY(16px);
}
<div class="a">
This text is vertically centered.
</div>

<div class="b">
<p>This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. </p>
</div>

<div class="b">
<p>This text is translated down to counter-act line-height</p>
</div>

As you can see here, line-height naturally vertically centers the text. Is there any way I can align it to the bottom of line-height without doing all these hacky calculations?

I am not trying to align content to bottom of the div, this text can be all the way at the top of the div. Where it is in the div is besides the point. I'm trying to have a multi-line paragraph where each line has height 40px, but the text baseline aligned to the bottom (of itself?) instead of center.

In my example paragraph, I'm using font-size 24px, and line-height 40px. I want the multiline paragraph to have 40px lines that consists of 16px of space, followed by 24px text. Right now, it starts with 8px of space, 24px of text, then 8px of space again. Even if I align it to the bottom of the parent div, there would still be 8px padding at the bottom due to 40px line-height and 24px font-size. It's not a duplicate of this question. I'm really sorry I am having trouble explaining.

Thanks to CBroe, found a solution that I think is a little better: https://jsfiddle.net/fpyjx56o/38/

Upvotes: 6

Views: 6508

Answers (1)

C3roe
C3roe

Reputation: 96151

You could put the text into an (additional) inline element, and apply a padding-top to that instead, if you want “more space” above the text.

p {
  line-height: 40px;
  font-size: 24px;
}

p span {
  padding-top: 10px;
  background: #999;
}
<p>
  <span>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad
    eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu autem nostro
    verterem. Ne etiam detraxit adversarium eam, rebum epicurei ea ius. Appareat lucilius
    invenire duo eu, an enim oportere duo, vidisse quaerendum at duo.</span>
</p>

Unfortunately though, although this looks right, the text doesn't actually get aligned to the bottom of it's line-height.

So you would actually want the "normal" letters like a C or a D to sit on the very "bottom", and have anything that has under-length parts - f, j, g, p, q, ... - have those parts "hang out" below the bottom of the line?

That should be achieveable, if you don't go for a solid background color for the span element - but a gradient. That would allow you to keep some "transparent" space at the bottom of the line box, so that it looks as if the text was actually sitting higher. (Would work with a background image as well, but a gradient probably could adapt more flexible to changing font sizes etc.)

Upvotes: 2

Related Questions