CSS::首字母选择器打破行间距

Question

当第一个字母比段落的其余部分大时(就像在讲故事的书中)首行换行符的间距:

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

https://jsfiddle.net/7zka3jsy/

正如您所看到的，第一行比段落的其余部分有更大的空间，因为 :first-letter 不仅向上移动，而且向下移动。

Answer 1

您可以通过设置适当的 line-height 来做到这一点 和 vertical-align 对于第一个字母:

p::first-letter {
  font-size: 250%;
  vertical-align: bottom;
  line-height: .9em;
}

Fiddle here.

或者，简单地应用一些整洁的 dropcase 像书一样的样式:

p::first-letter {
  font-size: 250%;
  float: left;
  padding-right: 7px;
  padding-bottom: 5px;
}

Fiddle here.