inline-block和line-height的问题

Question

在课程中多次出现display:inline-block和line-height组合的例子：

.trans-report a {
display: inline-block;
padding: 1rem;
line-height: 3rem;
color: #fff;
}

我发现如果没有display：inline-block，那么line-height这句就不起作用，这是为什么呢？

如果单独新建一个HTML文件，在div中a标签直接设置line-height是可以上下居中的，怎么在课程中的代码，就需要两者的配合？

Answer 1

liufanfrank 2016-06-27 16:36:23

a标签是行内元素,行内元素是没有高度的,当行内元素需要高度时就必须块元素或者行内块元素,才能撑起行高line-height

你说的情况有时候行高可以撑起高度,但是会影响盒子模型,在稍微复杂的情况下非常容易出错,所以要使用line-height必须要给inline-block

• 提问者 qq_Moriarty_1 #1

  非常感谢！