line-heightfont-sizeem-square字体属性定义了它们自己的em-square并标识字符绘图容器。这个方形容器是相对于font-size的。但不完全一样。字符的标记也和这个有关（x-height,baseline等）
BaBaBa
p{font-size:100px}.a{font-family:Helvetica}.b{font-family:Gruppo}.c{font-family:Catamaran}textline-box一行文本将包含许多如上所述的方形容器。所有这些容器所包含的是line-box。line-box的高度取决于它的孩子从孩子的最高点到孩子的最低点的高度。默认情况下，line-box足够大以包含孩子的所有孩子。高度是指==不是==内容区域的高度。行内元素有两个不同的高度。content-area的高度受font-size和font-family的影响。文本基线的距离，但虚拟区域的高度（在word、PS等软件中，使用两行文本基线之间的距离）。虚拟区域和内容区域之间的高度差是领先的（半行间距）。leading的一半在content-area之上，leading下面的另一半不支持非整数，上半部分向上取整，下半部分向下取整（可能不准确）。所以在大多数情况下，内容区域将在虚拟区域下方居中（如果前导只是2的倍数，则内容区域将垂直居中）。
标签由几个行框组成。下面的
由三个行框组成。第二行是最高的。第一行和第二行不受标签控制，也不能受非继承的css属性控制（包括::first-line）
好的设计会更好。BaBaBa我们要做出结果。
其他类型的line-box类型的替换元素，比如img、input、svg等inline-block和inline-*特殊格式的行内元素。例如，在flexbox中，所有flex项目。这些元素的高度是通过height、margin和border来计算的。height：autoheight、line-height、content-area的高度都相等。手动设置line-height此时只相当于设置了最小高度。主要是受vertical-align的影响。所以设置line-height:1是不好的做法。很可能virtual-area的面积小于content-area。line-height设置为一个无单位的数字，即标记为对应的font-size的倍数。padding和border会增加背景区域，但不会修改content-area区域。其他padding`margin和border会修改height，content-area和line-box`。vertical-align与父元素的匿名内联元素对齐。vertical-align的默认值是基线。文本基线的具体位置由每种字体决定。img、inline-block等其他图片的底边就是对齐值。CSS2视觉格式模型文档中有一段使用元素的基线来对齐父块中的匿名内联元素：>Thebaselineofan'inline-block'isthebaselineofitslastlineboxinthenormalflow,除非它没有流入行框或者它的'overflow'属性的计算值不是'visible'，在这种情况下，基线是底部边距边缘。*`inline-block`元素，如果有如果里面没有内联元素，或者overflow不可见，那么这个元素的基线就是它的margin的底边，否则，它的基线就是元素中最后一个内联元素的基线```.dib-baseline{显示：内联块；宽度：150px；高度：150px；边框：1px实心#cad5eb；background-color:#f0f3f9;
x-baseline```显然大小和显示级别是一样，但是结果是两者没有对齐在同一条水平线上，为什么呢？哈哈，上面的规格说明了一切。第一帧没有内联元素，所以基线是容器的下边距，也就是下边框以下的位置；并且第二帧里面有字符，都是纯内联元素，所以第二帧就是这些字符的基线就是字母x的下边缘。因此，我们可以看到第1帧的下边缘与第2帧中字符x的下边缘对齐的好结果。中间文本这标识了一条基线，该基线在shift方向上与字母基线偏移1/2x-height字体特征的值。该基线的位置可以从字体数据中获得，或者对于具有“x-height”字体特征的字体，可以使用“x-height”的1/2来计算。缺少这些信息中的任何一条，该基线的位置可能由“中心”基线近似。Midpoint从==element==的基线添加1/2x-height的高度。详情请参考字母'x'在CSS世界中的作用和故事。这里的元素包括父块中的匿名内联元素，其他内容区域的中心将这些元素与其中点对齐。也就是说...middle不会真正居中，它与字体的x-height和baseline有关。当纯粹由可替换元素组成的内容需要居中时，可以设置parentfont-size:0，将父块中匿名行内元素的高度设置为0（即保证所有行的行居中）top/bottomtexttop/bottomofline-boxtop/bottomofothermarginstext-top/text-bottomtextcontent-areatop/bottomofothermargins匹配匿名内联元素对应的对齐点父元素。数字百分比将元素的基线与父元素基线上方的给定百分比对齐，这是line-height属性的百分比。负值将元素的基线对齐到父元素基线上方的给定长度为向下值。负值是向下的问题vertical-align:baseline可能会导致line-box的高度大于line-height。BaBa
p{font-family:Catamaran;字体大小：100px；line-height:200px;}span:last-child{font-size:50px;}比较常见Ba
p{line-height:200px;}span{font-家庭：双体船；font-size:100px;}这时候line-box中会有一个匿名的inline元素，character属性与继承的characterfamily值相同。这个元素的宽度为0，line-height很可能和不一致。的高度不是200px;//这个可能比较好理解，ba是匿名内联元素，即使标签没有显式添加文字内容，也会有对应的高度
baBa
p{line-height:200px;}span{font-family:Catamaran;font-size:100px;}参考地址：https://www.zhangxinxu.com/wo...https://stackoverflow.com/que...https://stackoverflow.com/que...https://stackoverflow.com/que...https://iamvdo.me/en/blog/css...
