极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size: 100px;
}
span {
font-size: 12px;
line-height: 12;
}
</style>
</head>
<body>
<div>
<span>dsflfij</span>
</div>
</body>
</html>div的高度变得很高
css 中 line-height 的问题
line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。
先来看一个实例，如下图：
代码也很简单，就是当我们在div 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？
我们查一下 line-height 的定义，如下：
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
所以在以上的情况我们要想使，我们的字体能够撑满我们的容器，就需要给父级容器添加 line-height属性且值为 100%
代码和效果如下：
那么为什么会出现上面的问题呢？
line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。
所以，可以得出下面的一个公式：
空白间距 = line-height – font-size
所以，当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。
来, 走几步.
第一步, 属性的继承. DIV 没有自己定义的 font-size 和 line-height, 因此继承于 HTML, 得到 DIV 具有如下计算值:
html5
font-size: 100px;
line-height: normal;
第二步, 了解行高. 基于以上的计算值, 假设用户代理(即浏览器)采用的 line-height 使用值为 1.15, 那么实际上 DIV 的行高是 115px. 而所谓行高, 即是行盒的最小高度.
第三步, 了解行盒. 概念比较复杂, 详情请看我最后的链接. 行盒的高度是最上行内盒顶部到最下行内盒的底部(其中还有 vertical-align 的因素, 这里不表)并包含这个最小高度(这个最小高度是通过虚拟"支柱"实现的, 不表), 在你的代码里, DIV 只有一个行盒, 这个行盒又只有一个行内盒 SPAN, 而这个行内盒的行高是 12px * 12, 大于最小高度 115px, 故此行盒实际高度 144px.
第四步, DIV 取其顶部到其最后一个行盒(本例中只有一个)的高度, 即 144px.
所以, 当你增加 HTML 的 font-size 时, 导致 DIV 的行高使用值也在跟着变化, 一旦这个值超过 SPAN 的高度, 就会成为 DIV 的高度.
详细原理参见: https://segmentfault.com/a/11...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {
font-size: 100px;
}
span {
font-size: 12px;
line-height: 12;
}
</style>
</head>
<body>
<div>
<span>dsflfij</span>1
</div>
</body>
</html>因为font-size可继承，你这样写了后div的font-size也变大了。
并且需要注意的一点line-height里面 12 ！= 12px,详情百度一下差异
font-size是可继承的属性，你这样写之后div就继承了html 的font-size：100px的属性，所以div的font-size也变大了，由于你设置了span的font-size，所以就感觉div变得很高。
5 回答2.2k 阅读
3 回答1.7k 阅读✓ 已解决
5 回答823 阅读
3 回答2.6k 阅读
2 回答1.4k 阅读✓ 已解决
5 回答2k 阅读
3 回答2.3k 阅读
你的 span 的 line-height 值设置的是 12。
按照规定，当行高设为数字时，行高的计算值就是自身字体大小的相应倍数，具体到你的问题中就是 12x12=144，这样的话 div 的高度就应该是 144px(不算边框) 才对，但我们通过审查元素工具可以看到 div 的最终高度是 161px(不算边框)。
这其实涉及到行框高度的计算。div 的高度就是其内部行框的高度，而行框的高度是行框内最高点和最低点之间的距离（The line box height is the distance between the uppermost box top and the lowermost box bottom）。我们来看下面的demo。为了方便观察把 span 元素变成行块元素（有高度），背景颜色设为淡灰色，并且在 span 后面放一个字母 x ，x 底边所在的线就可以看做是 span 所在行框的基线。
http://codepen.io/zengkan0703...
当我们把 span 的 vertical-align 值设为 middle，如 box2 ，可以看到行框的最高点和最低点都是 span 元素的最高点和最低点，div 的最终高度就是理想的 144px。 当 span 的 vertical-align 值为默认的 baseline 时，如 box1， 为了跟行框的基线对齐，span 元素会下移，行框的最高点变成了匿名行内框 x 的最高点，最低点还是 span 的最低点，所以行框的高度就会变大为 161px。