Question

出于某种原因，我的“大”字体下面有一个恼人的填充/边距：

我扩大了字体比我需要的更多，只是为了夸大问题。有问题的CSS是：

p::first-letter {
  font-size: 40px;font-family: 'Special Elite',cursive;padding-right: 2px
}

如果我不使用较大的字体作为起始字符，那么它很好......但是一旦我把第一个字母变大，就会增加这个边距。

我怎样才能解决这个问题？

Answer 1

添加line-height会修复它

p::first-letter {
    font-size: 50px;
    font-family:'Special Elite', cursive;
    padding-right: 2px;
    line-height:10px;
}

Answer 2

您可以在第一个字母上使用相对大小调整，并将line-height属性设置为相对高度100%，如下所示：

p::first-letter {
    font-size: 200%;
    font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 100%;
}

Answer 3

您可以通过在p元素上指定行高来删除该差距：

p{line-height:18px;}

<强> DEMO

Answer 4

确保将::first-letter line-height属性定义为：

p::first-letter {
    font-size: 50px;font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 16px;
}

或

p::first-letter {
    font-size: 50px;font-family: 'Special Elite',cursive;
    padding-right: 2px;
    line-height: 100%;
}