张鑫旭说: vertical-align 与line-height 是css里面"很深"的知识.

vertical-align 与 line-height 对高度的影响.

注意这里的字体大小和em框高度的差距.

在simsun字体下:

    font-size + 行间距 = line-height

在simsun(宋体)字体下, 内容区域高度等于文字大小值.

内容区域高度只与字号以及字体有关, 与line-height没有任何关系.

张鑫旭说 "内联元素的高度是由line-height决定的!"[疑问脸]

内容区域高度 + 行间距 = 行高

只有simsun字体下 内容区域高度==font-size

多行文本高度就是单行文本高度的累加

黄色部分为半行间距

内容区域高度+行间距=行高，导致高度由行高决定

内联元素的高度由line-height决定

1、line-height的定义：两行文字基线之间的距离

2、内联元素的高度其实是由行高决定的

3、行高是两基线距离，单行文字为何有行高

行高有基继承性

高度的表现不是行高，而是内容区域和行间距

内容区域高度+行间距=行高

4、内容区域高度只与字号及字体有关，与line-height无关

若字体为宋体，内容区域高度等于文字大小值，font-size+行间距=line-height

内联元素的高度由行高决定，高度的表现不是行高，而是内容区域和行间距；（行高=内容区域+行间距）

内容区域高度只与字号以及字体有关，与line-height没有关系（宋体下内容区域等于字体大小）

行间距 = line-height - content area height

但是在宋体下

content area height = font-size

所以

此时的行间距 = line-height - font-size

内联元素的高度是由行高line-height决定的

内容区域高度

含多个行框盒子的包含容器

多行文本的高度就是单行文本高度累加

内联元素的高度是由line-height决定的！

内容区域 + 行间距 = 行高

simsun 字体 就是内容区高度

内容区域的高度只有字号以及字体有关；

行高只是幕后黑手，高度的表现不是行高，而是内容去与和行间距：

内容区域高度 + 行间距 = 行高

内联元素的高度是由行高决定的 line-height