字符实际大小和font-size的关系：
下图中不同字体font-size都是100px
测量了一下每个 span 的高度：Helvetica 115px，Gruppo 97px，Catamaran 164px。
所以，font-size 相同，font-family 不同，得到的 span 元素的高度也不同，为什么会这样呢，我们先了解下字体设计时，字符的结构：
一款字体会定义一个 em-square，设计时，宽高可以定位1000、 1024、2048px，显示到屏幕时上时，根据实际的font-size进行缩放，比如em-square为1000，font-size为100时，会把字体缩小到十分之一，但是字体的实际内容区域并不局限于em-square，它可以超出em-square，如下图所示：
下图是一个字体设计时，需要指定的各个部分，每个部分都要设置特定的值
图中ascender+ descender的高度就是字体中每个字符占据的高度（content-area）（实际显示时，是根据font-size大小来缩放的）（各个字符实际显示的高度可能不一样，如图中h和j，但是同一个字体，font-size相同的情况下，content-area都是一样大的）
图中ascender+ descender+line gap(leading)的高度，就是默认情况下，line-height的高度(line-height的默认值是normal)（实际显示时，是根据font-size大小来缩放的，且图中line gap(leading)部分的高度会等分为两半分别显示在content-area的上方和下方）
em-square只是字体设计中一个初始的框，字体的设计大小并不会局限在em-square里，所以em-square会小于或等于content-area，但是实际显示时，计算缩放比是根据em-square的大小和font-size的大小来计算的
我们可以在把一款字体放到 FontForge 中，分析它的字体度量：
可以看到在这款字体中，em-square是1000，content-area是 1100 + 540=1640，当我们把font-size设置为100时：
content-area = (100/1000)*(1100 + 540)=164
如果没有设置line gap，line-height默认值为164
我们还能看出大写字母的高度是 68px，小写字母的高度（x-height）是 49px。
结论:定义某个字体为100px时，其实际占据高度(content-area)大于或等于100px，默认情况下(line-height:normal)，所在行的line-height大于或等于content-area
设置line-height的值
1.line-height的默认值是normal，上一条中说过，它的高度是ascender+ descender+line gap
2.line-height可以设置为具体的值，比如100px，这个值可以大于content-area的值，也可以小于content-area的值，line-height和content-area的差值叫leading（字体设置时，可以指定初始的leading，即line gap），这个值会等分为两半分别显示在content-area的上方和下方，leading为负值时，也是上下平分
我们看下leading为负值的例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
.div1 {
font-size: 100px;
line-height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1">div1</div>
</body>
</html>
没有定义height的情况下，height默认为 line-height的值，background-color的高度跟height一致
可以看到content-area超出了 line-height，超出部分上下平分
接下来，我们定义div1的height：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
.div1 {
font-size: 100px;
line-height: 50px;
background-color: red;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
</body>
</html>
背景色跟随height变高了，因为line-height还是50px，div1这个块可以显示多行，默认都是从左上角开始第一行的显示，改变height并不会改变div里面的某一行，具体某一行的状态（高度，位置）并不因整个div的高度改变而改变，他们之间没有直接的关联性
设置height不能改变行内内容的位置，设置line-height可以改变位置，因为leading部分要上下平分
通常利用line-height让inline元素垂直居中（img是特殊的inline元素），block或inline-block子元素并不能通过这个方法垂直居中
我们看下多行显示， line-height小于content-area的话，有可能出现多行重叠：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
.div1 {
font-size: 100px;
line-height: 50px;
background-color: red;
border: 1px blue solid;
}
.div2 {
font-size: 100px;
line-height: 50px;
background-color: red;
border: 1px blue solid;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
3.line-height还可以设置成一个数字
line-height:1 就是一个很糟糕的实践。当 line-height 的值是一个数字时，其实就是相对 font-size 的倍数，而不是相对于 content-area。所以 line-height:1 很有可能使得 virtual-area 比 content-area 矮，从而引发很多其他的问题
vertical-align和line-height的理解及实例
原文：https://www.cnblogs.com/cowboybusy/p/11474783.html