Как прижать baseline-линию текста к низу родительского блока?

Question

[Finesse]

Текст в блоке прижат к низу с помощью абсолютного позиционирования. Примерно так:

<div class="block">
  <div class="contents">
    Foo Bar
  </div>
</div>

.block {
  background: #aaa;
  width: 300px;
  height: 150px;
  position: relative;
}
.contents {
  position: absolute;
  bottom: 0;
  left: 10px;
  line-height: 1;
  font-size: 30px;
}

Живое демо: codepen.io/anon/pen/QNdxvL?editors=1100

В результате между нижнем краем текста и низом блока .block образуется пробел:


Как сделать так, чтобы этого пробела не было, независимо от выбранного шрифта? Чтобы получилось так:

Answer 1

[Finesse]

Для блока .contents установить значение line-height равным 0 и добавить него какой-нибудь элемент, у которого свойство display равно inline-block:

.contents {
  line-height: 0;
}
.contents:before {
  content: "";
  display: inline-block;
}

Демо: codepen.io/anon/pen/MyJXoy?editors=1100

Answer 2

[#rybak]

Есть несколько способов для вертикального выравнивания
в интернете масса статей по этому вопросу
Попробуйте вот так, например

Comments

[Finesse]

Дайте, пожалуйста, ссылки на примеры статей, в которых рассматривается мой вопрос.

[Finesse]

Прижать .contents к низу .block то проще простого. А вот как дожать baseline, не очень понятно.