如何删除文本下方的空白？

Question

PLAYGROUND HERE

死的简单问题：

HTML：

<div>Hello World</div>

CSS：

div {
  background-color: rgba(255, 0, 0, 0.3);
  font-size: 70px;
}

结果：

删除文本下面的空白是最简单的（没有黑客请求）方法，即定位文本以使其基线位于元素的底部？

期望的结果：

PLAYGROUND HERE

Answer 1

看起来它正在为“更低”的空间腾出空间。字母如＆＃39; j＆＃39;。您可以设置div的高度，但这看起来像：

div {
  background-color: rgba(255, 0, 0, 0.3);
  font-size: 70px;
  vertical-align: bottom;
    height: 70px
}

fiddle

Answer 2

更改line-height和padding-top

的值

div {
    background-color: rgba(255, 0, 0, 0.3);
    font-size: 70px;
    line-height: 48px;
    padding-top: 8px;
}

<强> FIDDLE

div {
    background-color: rgba(255, 0, 0, 0.3);
    font-size: 70px;
    line-height: 48px;
    padding-top: 8px;
}

<div>Hello - g - World</div>

OR（类似于@Michal的回答）......

您可以为div添加一个高于字体大小的高度，例如：

div {
    background-color: rgba(255, 0, 0, 0.3);
    font-size: 70px;
    height: 64px;
}

<div>Hello - g - World</div>