css - 元素下方显示额外边距？

Question

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

http://jsfiddle.net/o9gvgz8c/1/

我将字体放大到超出了我的需要，只是为了夸大问题。有问题的 CSS 是:

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

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

我该如何解决这个问题？

Answer 1

JS Fiddle

添加line-height将修复它

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