当给.inner设置height的时候里面的文字就跑到下面了，为什么啊？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .test { line-height: 200px; background-color: #ccc; } .test .inner { display: inline-block; height: 20px; width: 100px; vertical-align: middle; background-color: yellow; } .test .text { display: inline-block; /*height: 20px;*/ width: 100px; /*vertical-align: bottom;*/ background-color: rgb(240, 20 ,20) } </style> </head> <body> <div class="test"> <span class="inner">ddd</span> <span class="text">我是文字</span> </div> </body> </html>

关于line-height的一个奇怪的问题

发布于
2017-12-08

✓ 已被采纳

如果你将文字也理解成节点就好解释了

.test {
    line-height: 200px;
}
.test .inner {
    display: inline-block;
    height: 20px;
    width: 100px;
    vertical-align: middle;
}

由于inner是行内元素，vertical-align: middle;是对自身的一个垂直居中
inner的行高继承了父盒子的，文字的行高也为200px，因此会在下面，也是因为其行高
给inner添加line-height:20px后就OK了

XiuBug

8.5k1016

发布于
2017-12-08

更新于
2017-12-08

该问题的关键点是考察line-height的继承问题。
如果line-height属性值有单位（line-height: 100px;） 或 百分比（line-height: 100%;），则浏览器会继承换算后的一个具体的px级别的值（固定值）；而如果line-height属性值没有单位（line-height: 1.5;），则浏览器会直接继承这个“因子”，而非计算后的固定值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。
举个简单的小例子：

// html
<div class="parent1">
    <span class="child1">ddd</span>
</div>

<div class="parent2">
    <span class="child2">ddd</span>
</div>

<div class="parent3">
    <span class="child3">ddd</span>
</div>
// 由于 parent1 的line-height是有单位的，那么子元素会直接继承一个固定值，即200px
.parent1 {
    line-height: 200px;
}

// 由于 parent2 的line-height是百分比，那么子元素会直接继承一个换算后的数值，即200% * 20 = 40px
.parent2 {
    line-height: 200%;
    font-size: 20px;
}
// 由于 parent3 的line-height是没有单位的，那么子元素会直接继承这个因子，即1.5，此时子元素的line-height会根据本身的font-size值重新计算得到新的line-height 值 
.parent3 {
    line-height: 1.5;
}

建议您搜搜 line-height 继承，加深下对line-height的理解。希望对您有所帮助！