<style> body{ padding: 0; margin: 0; } div{ line-height:0 } span{ font-size: 40px; } </style> </head> <body> <div><span>123</span></div>

这个div的10px是哪里来的能帮我看一下吗？

发布于
2019-08-11

更新于
2019-09-01

✓ 已被采纳

首先看 line-height 的规范

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

在这里，div 的 line-height:0 定义了包裹 span 的 line box 的最小高度是 0。

注意：这里是最小高度

为什么是最小高度呢，因为 line box 需要包裹住一行内最高和最低的内容，可以看这张图(来自最下方的参考文档)。

考虑下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .demo {
        border: 1px solid blue;
        line-height: 64px;
        margin-top: 50px;
        margin-left: 50px;
      }
      .demo__text,
      .demo__child {
        border: 1px solid red;
      }
      .demo__child {
        font-size: 40px;
      }
      .form {
        position: absolute;
        top: 200px;
        padding: 15px;
        line-height: 2;
      }
    </style>
  </head>
  <body>
    <div class="demo">
      <span class="demo__text">123p</span>
      <span class="demo__child">123p</span>
    </div>
  </body>
</html>

仿照上图，我做了一张图解释，div.demo 的高度为什么是 72px 左右。

同样的道理，如果你设置 div.demo 的 line-height:0，结果就是

注意，.demo__text 和 .demo__child 此时的 virtual-height 应该是 0（我加了 border 好辨认），但是他们的位置不一样。而根据规范：

The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
行盒子的高度必须要包括最高的盒子的顶部和最低的盒子的底部

所以在这里，line box 的高度必须要包括 .demo__text .demo__child，所以他两的位置差就成了 .demo 的高度。

参考文档：

Deep dive CSS: font metrics, line-height and vertical-align