是否可以将文本与行高底部对齐？

Question

我正在查看material design specs，我看到他们有行高为 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);
}

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

正如您在此处看到的，line-height 自然地垂直居中文本。有什么方法可以在不进行所有这些 hacky 计算的情况下将其对齐到 line-height 的底部？

我不想将内容与 div 的底部对齐，此文本可以一直位于 div 的顶部。它在 div 中的位置不是重点。我试图有一个多行段落，其中每行的高度为 40px，但文本基线对齐到底部（本身？）而不是中心。

在我的示例段落中，我使用的字体大小为 24 像素，行高为 40 像素。我希望多行段落有 40px 行，其中包含 16px 的空间，然后是 24px 的文本。现在，它从 8px 的空间开始，24px 的文本，然后又是 8px 的空间。即使我将它与父 div 的底部对齐，由于 40px 行高和 24px 字体大小，底部仍然会有 8px 填充。它不是this question 的副本。真的很抱歉我无法解释。

感谢CBroe，找到了一个我认为更好一点的解决方案：https://jsfiddle.net/fpyjx56o/38/

Answer 1

如果您希望文本上方有“更多空间”，您可以将文本放入（额外的）内联元素中，然后对其应用 padding-top。

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>

不幸的是，虽然这看起来正确，但文本实际上并没有与它的行高底部对齐。

因此，您实际上希望像 C 或 D 这样的“正常”字母位于最“底部”，并且具有任何长度不足的部分 - f、j、g、p、q、.. . - 这些部分是否“挂在”行的底部下方？

这应该是可以实现的，如果您不为 span 元素选择纯色背景色 - 而是使用渐变色。这将允许您在行框底部保留一些“透明”空间，这样它看起来就好像文本实际上坐得更高。 （也适用于背景图像，但渐变可能更灵活地适应更改字体大小等。）