CSS line-height、font-size、height_line-heght为啥大小写字母不一样-CSDN博客

本文链接：https://blog.csdn.net/qq_41867528/article/details/103759575

CSS line-height、font-size、height

在我们了解line-height之前，我们应该了解x-height。

小写字母的高度取决于小写字母x的高度，不包括上升或下降。

在西文字体排印学中，x字高指的是字母的基本高度，精确来说，就是**基线(baseline)与主线(mean line)**之间的距离。它指称一个字体中小写字母x的高度（x-height的的语源）。在现代字体设计领域里，x字高代表了一个字体的设计因素，在一些场合，字母x并不完全等于x字高。

a、c、e、m、n、o、r、s、u、v、w、z和 x的字高相同。

在西文中，除了以上这些字母以外，其他的小写字母都比x字高要大。这些字母分为两类，一种是含有降部的字母，一种是含有升部的字母。

降部字母笔画向下超过基线，比如字母y、g、q和p。

升部字母笔画含有向上的部分，比如l、k、b和d。

x字高和字母主字高的比例是考察一个字体设计的重要因素。

在这里插入图片描述

用于对网页文字及其他元素设置行高，它会影响元素高度，因此也可用它调整一些元素的高度。

行高指的是文本行的基线间的距离（文字尺寸与行距之间的和）。文本之间的空白不仅受行高影响，同时也受字号影响。

line-height属性设置行间的距离（行高）。即两行文字基线之间的距离。

line-height是不允许用负值的。

行高是作用在每一个行框盒子(line-box)上的，而行框盒子是由内联盒子组成。所以行高直接决定了内联元素的高度。对于块级元素和替换元素，行高无法决定最终高度，只能决定行框盒子的最小高度。

至于什么是行框盒子，我们下次再详说。

值	描述
normal	默认。设置合理的行间距。会受font-family的影响。不同操作系统，不同浏览器所使用的字体不一样，所以最终line-height的具体值不一样。
number	设置数字。此数字会与当前的字体尺寸(font-size)相乘来设置行间距。
length	设置固定的行间距。长度用的最多的就是px与em。em跟数字一样是相对于font-size计算的。
%	基于当前字体尺寸的百分比间距。百分比相对于font-size计算。
inherit	规定应该从父元素继承line-height属性的值。