如何将文本基线推送到父块的底部？

Question

有一些布局：

＆＃13;

＆＃13;

.block {
  background: #aaa;
  width: 300px;
  height: 150px;
  position: relative;
}
.contents {
  position: absolute;
  bottom: 0;
  left: 10px;
  line-height: 1;
  font-size: 30px;
}
.contens > * {
  vertical-align: baseline;
}
.content1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
}
.content2 {
  font-size: 45px;
}

＆＃13;

<div class="block">
  <div class="contents">
    <span class="content1"></span>
    <span class="content2">Foo</span>
    <span class="content3">Bar</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何将.contents的文字基线推到.block的底部，而不管字体是什么？

预期结果：

将.contents块向下移动bottom: -0.1em;是不合适的，因为字体面具有不同的基线水平。

Answer 1

将行高更改为0，添加溢出：隐藏

.block {
  background: #aaa;
  width: 300px;
  height: 150px;
  position: relative;
  overflow:hidden;
}
.contents {
  position: absolute;
  bottom: 0;
  left: 10px;
  line-height:0;
  font-size: 30px;
}
.contents > * {
  vertical-align: baseline;
}
.content1 {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
}
.content2 {
  font-size: 45px;
}

<div class="block">
  <div class="contents">
    <span class="content1"></span>
    <span class="content2">Foo</span>
    <span class="content3">Bar</span>
  </div>
</div>

Answer 2

只需设置css line-height: 0;

即可

请参阅：http://codepen.io/ivoglent/pen/KzaWNG