CSS 首字母格式在第一行和第二行之间造成间隙

Question

当我使用 css ::first-letter 增加字体时，如下：

p:first-letter {
    font-size: 400%;
}

它在段落的第一行和第二行之间创建了一个空隙。您能否提出一个解决方案来避免这种差距。

Answer 1

您的问题位于 line-height。如果您想知道行高实际上是如何工作的，我建议您阅读这篇文章：http://joshnh.com/weblog/how-does-line-height-actually-work

p {
  padding: 15px;
}
p:first-letter {
  font-size: 400%;
  line-height: 0;
  padding-top: 20px;
}

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 2

那是因为它们按基线对齐，大字体的下行部分要高得多。

处理大首字母的一个好方法是将它们视为浮动元素（即在文本块内）并将它们的高度调整为使用的常规字体和字体大小，像这样：

p:first-letter {
  font-size: 500%;
  float:left;
}

<p class="first-letter">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>

CSS 首字母格式在第一行和第二行之间造成间隙

CSS first-letter formatting creates gap between first and second line

css

letter

line

paragraph