css - html根字体设置成很大的值后， 包裹了行内元素的div莫名变高是什么原因
问题描述
代码<!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> <p> <span>dsflfij</span> </p></body></html>
p的高度变得很高
问题解答
回答1：你的 span 的 line-height 值设置的是 12。
按照规定，当行高设为数字时，行高的计算值就是自身字体大小的相应倍数，具体到你的问题中就是 12x12=144，这样的话 p 的高度就应该是 144px(不算边框) 才对，但我们通过审查元素工具可以看到 p 的最终高度是 161px(不算边框)。
这其实涉及到行框高度的计算。p 的高度就是其内部行框的高度，而行框的高度是行框内最高点和最低点之间的距离（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 元素的最高点和最低点，p 的最终高度就是理想的 144px。 当 span 的 vertical-align 值为默认的 baseline 时，如 box1， 为了跟行框的基线对齐，span 元素会下移，行框的最高点变成了匿名行内框 x 的最高点，最低点还是 span 的最低点，所以行框的高度就会变大为 161px。
回答2：css 中 line-height 的问题
line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中，但是在使用它的过程中也会遇到一些问题。
先来看一个实例，如下图：
代码也很简单，就是当我们在p 中定义的字体很大的情况下，我们看到字体和父级元素之间有一些空隙。那么这是为什么？我们查一下 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。
回答3：来, 走几步.
第一步, 属性的继承. p 没有自己定义的 font-size 和 line-height, 因此继承于 HTML, 得到 p 具有如下计算值:
font-size: 100px;line-height: normal;
第二步, 了解行高. 基于以上的计算值, 假设用户代理(即浏览器)采用的 line-height 使用值为 1.15, 那么实际上 p 的行高是 115px. 而所谓行高, 即是行盒的最小高度.
第三步, 了解行盒. 概念比较复杂, 详情请看我最后的链接. 行盒的高度是最上行内盒顶部到最下行内盒的底部(其中还有 vertical-align 的因素, 这里不表)并包含这个最小高度(这个最小高度是通过虚拟'支柱'实现的, 不表), 在你的代码里, p 只有一个行盒, 这个行盒又只有一个行内盒 SPAN, 而这个行内盒的行高是 12px * 12, 大于最小高度 115px, 故此行盒实际高度 144px.
第四步, p 取其顶部到其最后一个行盒(本例中只有一个)的高度, 即 144px.
所以, 当你增加 HTML 的 font-size 时, 导致 p 的行高使用值也在跟着变化, 一旦这个值超过 SPAN 的高度, 就会成为 p 的高度.
详细原理参见: https://segmentfault.com/a/11...
回答4：<!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> <p> <span>dsflfij</span>1 </p></body></html>
因为font-size可继承，你这样写了后p的font-size也变大了。
并且需要注意的一点line-height里面 12 ！= 12px,详情百度一下差异
回答5：font-size是可继承的属性，你这样写之后p就继承了html 的font-size：100px的属性，所以p的font-size也变大了，由于你设置了span的font-size，所以就感觉p变得很高。
网公网安备