CSS ::第一个字母选择器会打破行间距

Question

当使第一个字母大于段落的其余部分时(如在故事书中),第一个换行符的间距:

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

正如你所看到的那样,第一行的空间比段落的其余部分更大,因为:第一个字母不会向上移动,而是向下移动.

Answer 1

你可以通过设置正确的line-height和vertical-align第一个字母来做到这一点:

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

或者,只需应用一些整洁的书架样式样式:

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