ok~_~ok 2020-03-29 11:15 采纳率: 80%
浏览 350
已采纳

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

当 span 元素的 line-height 设置为 0 时,为什么所在的行会向上移动到 div 元素上面?移动了多少高度呢?(0-50)/2 = -25px ?



运行结果也可在这查看


<!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条回答 默认 最新

  • 李国庆❀ 2020-03-29 17:29
    关注

    首先如果将字体写成16px即默认字体大小,运行结果会是:
    图片说明

    修改成50px后文字上移到<div>中的原因是文字的对齐方式是对齐它们的基线,比如英文x的低端就是文字的基线,行高为0后文字的基线就不会发生改变。
    导致变大后的文字只能上移,所以就会有部分文字显示在<div>上。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 9月12日

悬赏问题

  • ¥30 vmware exsi重置后登不上
  • ¥15 易盾点选的cb参数怎么解啊
  • ¥15 MATLAB运行显示错误,如何解决?
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题
  • ¥20 yolov5自定义Prune报错,如何解决?
  • ¥15 电磁场的matlab仿真
  • ¥15 mars2d在vue3中的引入问题
  • ¥50 h5唤醒支付宝并跳转至向小荷包转账界面