6

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/

Essam Al-Mansouri
  • 1,049
  • 2
  • 11
  • 19
  • Put the text into an (additional) inline element, and apply a padding-top to that instead, if you want “more space” above the text …? – CBroe Jul 09 '18 at 12:33
  • @CBroe It's a multiline paragraph with line-height 40px and font-size 24px (so 16px of space), and I need all that space to be above the text on each online. Using padding-top would only work if this was single-line, unless I misunderstood what you mean. – Essam Al-Mansouri Jul 09 '18 at 13:09
  • @Mr.Roshan: I tried to clarify in the main post how this isn't the same problem. I'm not trying to align text to parent container, I'm trying to align text to the bottom of itself. I hope that makes sense. I also want to clarify that the example I have in my post "solves my problem" but I was hoping to find a a better, less hacky solution. – Essam Al-Mansouri Jul 09 '18 at 13:11
  • I meant like this, https://jsfiddle.net/fpyjx56o/ - _inline_ is the important keyword here, the padding-top for the inline span is applied to every line, not just on top as it would with a block container. – CBroe Jul 09 '18 at 14:17
  • @CBroe: I didn't know about the inline thing, thanks for that. Unfortunately though, although this looks right, the text doesn't actually get aligned to the bottom of it's line-height. I made some changes and added a one-line paragraph after, to make it more obvious that the text isn't re-aligning. I think with a little tweaking it would still be a better solution than mine. Post your answer so I can mark it. jsfiddle.net/fpyjx56o/19/ – Essam Al-Mansouri Jul 09 '18 at 14:58

1 Answers1

2

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.)

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Yes I do want the letters like g, j, q, p, etc. to hang outside of the actual element. I don't necessarily care that it overflows. In my actual application, I have padding on the parent container and they're both the same background, so it doesn't actually look like the text is out of it's element. Anyways, thank you for the help. Marked your answer. – Essam Al-Mansouri Jul 09 '18 at 20:20