当 span 元素的 line-height 设置为 0 时，为什么所在的行会向上移动到 div 元素上面？移动了多少高度呢？(0-50)/2 = -25px ?
运行结果也可在这查看： https://jsbin.com/yawurubebi/edit?html,css,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<span>hello world</span>
</body>
</html>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
background: skyblue
}
span {
font-size: 50px;
line-height: 0px;
background-color: pink;
}
 |
1
chengyecc Mar 29, 2020 via Android
因为文字在行高内垂直居中？
|
 |
2
127000 Mar 29, 2020
取值 <数字>
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置 line-height 的推荐方法，不会在继承时产生不确定的结果 developer.mozilla.org/zh-CN/docs/Web/CSS/line-height |
 |
4
manyfreebug OP @127000 额，这段话貌似也不能解释发生的现象啊。。。不好意思
|
 |
5
gzlock Mar 29, 2020 via Android
vertical-align 为 middle 的话，上移量就是字体高度 /2 吧
改变 vertical-align 为 bottom 就可以看到变化 |
 |
6
wszgrcy Mar 29, 2020 via Android
盲猜因为行高为 0 x 高就重合于上边，可以把 hello world 改成 x 看看是不是把 x 在中间分割了
|
 |
7
PyCode Mar 29, 2020
这里发生了这些事：首先 span 外层会添加匿名行盒，然后由于 span 的行高设为 0，该行盒高度也变为了 0，因为 half-leading 的规范，span 的文本内容会向上移动 content height 的一半
|
Select Language