当元素的 line-height 设置为 0 时，怎么解释所在行发生的这种现象？

2020-03-28 23:17:00 +08:00
 manyfreebug
当 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;
}
2281 次点击
所在节点    CSS
7 条回复
chengyecc
2020-03-29 00:49:45 +08:00
因为文字在行高内垂直居中？
127000
2020-03-29 00:50:43 +08:00
取值 <数字>
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置 line-height 的推荐方法，不会在继承时产生不确定的结果
developer.mozilla.org/zh-CN/docs/Web/CSS/line-height
chengyecc
2020-03-29 00:52:09 +08:00
@chengyecc 没看清。。。不好意思
manyfreebug
2020-03-29 07:36:14 +08:00
@127000 额，这段话貌似也不能解释发生的现象啊。。。不好意思
gzlock
2020-03-29 08:48:45 +08:00
vertical-align 为 middle 的话，上移量就是字体高度 /2 吧
改变 vertical-align 为 bottom 就可以看到变化
wszgrcy
2020-03-29 10:54:25 +08:00
盲猜因为行高为 0 x 高就重合于上边，可以把 hello world 改成 x 看看是不是把 x 在中间分割了
PyCode
2020-03-29 16:05:48 +08:00
这里发生了这些事：首先 span 外层会添加匿名行盒，然后由于 span 的行高设为 0，该行盒高度也变为了 0，因为 half-leading 的规范，span 的文本内容会向上移动 content height 的一半

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/657180

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX