Можно ли выровнять текст по нижней части высоты строки? ⇐ CSS

[Anonymous]

Я просматривал спецификации Material Design и увидел, что в них есть текст с высотой строки 20 пикселей и размером шрифта: 14 пикселей, но текст по-прежнему выровнен по нижнему краю.

Я попробовал скопировать это, но это оказалось намного сложнее, чем я думал. Позвольте мне показать вам.

Код: Выделить всё

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

Код: Выделить всё

This text is vertically centered.

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.

This text is translated down to counter-act line-height

Как вы можете видеть здесь, line-height естественным образом центрирует текст по вертикали. Есть ли способ выровнять его по нижней части высоты строки, не выполняя всех этих хакерских вычислений?

Я не пытаюсь выровнять контент по нижней части элемента div, этот текст может быть полностью вверху элемента div. То, где он находится в div, не имеет значения. Я пытаюсь создать многострочный абзац, где каждая строка имеет высоту 40 пикселей, но базовая линия текста выровнена по низу (сама по себе?), а не по центру.

В моем примере абзаца я использую размер шрифта 24 пикселя и высоту строки 40 пикселей. Я хочу, чтобы в многострочном абзаце были строки шириной 40 пикселей, состоящие из 16 пикселей пространства, за которыми следовал текст размером 24 пикселя. Прямо сейчас он начинается с 8 пикселей пространства, 24 пикселей текста, затем снова 8 пикселей пространства. Даже если я выровняю его по нижней части родительского элемента div, внизу все равно будет отступ в 8 пикселей из-за высоты строки 40 пикселей и размера шрифта 24 пикселя. Это не дубликат этого вопроса. Мне очень жаль, что у меня возникли проблемы с объяснением.

Благодаря CBroe я нашел решение, которое, на мой взгляд, немного лучше: https://jsfiddle.net/fpyjx56o/38/

Подробнее здесь: https://stackoverflow.com/questions/512 ... ine-height