line-height理解和应用

最近工作中碰到了一个问题，在line-height都等于1，vertical-align:baseline的情况下同一个字体下， 30px的数字和14px的文字并不是真的视觉上的“文字底部对齐”，

虽然心里想着应该和字体有关，也确实换了不同字体试过，不同字体的呈现差距不一样，但还是想趁这个机会深入学习下line-height和vertical-align的一些知识。

看了慕课网的张鑫旭讲的line-height和vertical-align，很详细，很生动，所以为了加深点理解，自己整理了个笔记。

步入正题：

CSS盒子模型

想要理解line-height，先要理解css的盒子模型。盒子模型，从大到小分为【包含盒子containing box】，【行框盒子line box】，【内联盒子inline box】和【内容盒子 content area】。除了内联盒子和内容区域没有包含关系，其他都是包含关系。

内容区域：是围绕文字看不见的一个盒子，其大小只和font-size有关，和line-height无关。按照张大神的说法，是类似与我们选中文字时候，蓝色背景包含的部分。

内联盒子：内联盒子不会让内容成块状显示，而是排成一行。类别有内敛元素（如span，em等）和纯文字的‘匿名内联元素’两种。

行框盒子：每一行就是一个行框盒子，每一行包括数个内联盒子。

包含盒子：由一行行的行框盒子组成。

关于内联元素（不是块元素）的高度

内联元素的高度是由line-height决定的, 不是font-size决定的。只是一般桌面浏览器的line-height的默认值在1.2左右（不同浏览器不一样，但大约都是在1.2左右，由浏览器参考字体决定）

理论上来说：内联元素的高度是由 【内容区域高度 + 行间距】决定的，但同时 【行间距 = 行高 - 内容区域高度】，所以，也可以得出内联元素的高度是由line-height决定的结论。另外，内容区域高度是不确定的，和font-family有关系。

line-height 1.5和line-height 150% 、1.5em的区别，如下图所示

这三个值对自身元素都是一样的，但是对继承的元素，1.5的子元素依旧会按照1.5*font-size计算，但是150em和150%子元素会根据父元素font-size*1.5的高度来做自己的行高

消除图片间隙的方法

如下图所示，在块元素包含图片的时候，底部有多出来的一行空隙。原因这里有个隐藏的文本节点，因为隐匿文本节点和图片是baseline对齐，所以就会多出来一行空隙

解决间隙的方法有三种：

1.  设置图片的dispaly: block（vertical-align只适用于inline，inline-block元素）

2. 设置 img {vertical-align:bottom}

3. .wrapper {line-height:0 } （行高很小，基线上移）

vertical-align：middle是指基线往上1/2X的位置，但是有些字体的基线会上浮或者下沉

实现多行文本居中

作者：桃子Lisa
链接：https://www.jianshu.com/p/96d9a2aff3a7