内联块元素的行高问题

在line-height正在申请,但你需要了解它是如何应用.如果我们参考规范:

在内容由内联级元素组成的块容器元素上,'line-height'指定元素中行框的最小高度

通过设置line-height:5父元素,您可以为线框设置最小高度.

在未替换的内联元素中,'line-height'指定用于计算线框高度的高度.

通过设置line-height:1.5您定义的线盒高度.¹

为了方便起见,你有一个高度等于线1.5框内的线框,其高度等于5但你无法直观地看到这一点.如果你增加了孩子的行高,你到达5那时你将达到最小高度,你将开始增加父元素定义的行.

要看到这个,你需要申请vertical-align.如果子元素的行高小于父元素的行高,则可以对齐:

.container {
  max-width: 200px;
  border: 2px black solid;
  line-height: 5;
}

.container>a {
  line-height: 1.5;
}

  First
  Second
  Third
  Fourth