CSS：如何在行高的底部设置文本

Question

我有line-height: 3的div。 如何将文本放在行高的底部？目前，文本始终锚定在行高的中间。

.test{
  background-color: yellow;
  line-height: 3
}

<div class='test'>
  AAAAAAAAAAAAAAAAA
</div>

Answer 1

你不能......行高影响所有文本及其周围的空间。你想要的是填充顶部。

.test {
  background-color: yellow;
  line-height: 1;
  padding-top: 2em;
}

<div class='test'>
  AAAAAAAAAAAAAAAAA
</div>