本文原创：liruifang
作为一个前端人，经常混迹于图片和文字相互糅杂的江湖中，稍有不慎便会中招，本文主要从line-height和vertical-align入手，分析项目中出现的“诡异”现象，透过现象看本质，从而化敌为友为我所用。
目录
- 问题现象
- 属性介绍
- 问题剖析
- 简单应用
- 参考文献
一、令人抓狂的现象
1. 单行文本占据的高度
<style type="text/css">
.demo1 {
line-height: 100px;
background-color: pink;
}
.demo1 span {
font-size: 40px;
background-color: grey;
}
</style>
<div class="demo1">
<span>xxJD-BG-FExx</span>
</div>
为什么单行文本的可视高度是109px，而不是100px？
2. 图片下面的空隙
<style type="text/css">
.demo2 {
border: 1px solid black;
width: 1080px;
}
.img {
display: inline-block;
height: 296px;
}
.text {
background: pink;
}
</style>
<div class="demo2">
<img class="img" src="img/konan.jpg">
</div>
图片下方为什么会出现空隙？
3. 图文对齐问题
<style type="text/css">
.demo3 {
font-size: 40px;
}
.icon {
width: 1em;
vertical-align: middle;
}
.gap {
display: inline-block;
}
.gap span {
/*vertical-align: middle;*/
}
</style>
<div class="demo3">
<p class="gap"><img class="icon" src="img/unpaid.png">待支付：</p>
</div>
明明用了vertical-align: middle，图片位置为什么偏下？
4. 矩形块对齐异常
<style type="text/css">
.demo4 {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.align {
/*line-height: 0;*/
/*font-size: 0;*/
/* vertical-align: top;*/
}
</style>
<div class="demo4"></div>
<div class="demo4"></div>
<div class="demo4">x见证奇迹x</div>
矩形块为什么不是一行排列？
5.vertical-align怪异反应
<style type="text/css">
.ctn-block{
background-color: #bbb;
}
.ctn-block .child {
display: inline-block;
width: 100px;
background-color: aliceblue;
}
.ctn-block .child-1 {
height: 100px;
vertical-align: middle;
}
.ctn-block .child-2 {
height: 200px;
}
.ctn-block .child-3 {
height: 300px;
}
</style>
<div class="ctn-block">
<div class="child child-1"></div>
<div class="child child-2"></div>
<div class="child child-3"></div>
</div>
最小矩形块明明设置了vertical-align: middle;为什么没有居中对齐，反而感觉“掉”下去了？
二、透过现象看本质
（一）line-height
- 本页内容来自W3C：
- 定义和用法
line-height 属性设置行间的距离（行高）
- 注释
不允许使用负值
- 说明
a.该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
b.line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
- 取值
| 取值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
- 划重点
a.分成两半加到文本行上下
b.相对值：相对于font-size计算
font-size: 14px;
line-height: 1.5;（21px）
line-height: 150%;
line-height: 1.5em;
都是21px，三者是否完全一样？
<head>
<title>line-height相对值</title>
<style type="text/css">
body,h3,p {
margin: 0;
}
body {
font-size: 14px;
line-height: 1.5;
/*line-height: 150%;*/
/*line-height: 1.5em;*/
}
h3 {
font-size: 32px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h3>标题</h3>
<p>内容</p>
</body>
上例中，vertical-align:1.5时，标题和文字显示正常；其他两个值时，标题和文字却挤在了一起。
分析：继承的差别，line-height为数值时，所有子元素继承的都是这个值；而另外两个相对值，子元素继承的是最终的计算值。
1. 对于块级元素，line-height指定了元素内部行框盒子（line-boxes）的最小高度,对块级元素本身没有任何作用
2. 对于非替代纯内联元素，可视高度完全由line-height决定（对，是完全），line-height指定了用来计算行框盒子高度的基础高度
3. 对于替代行内元素，例如img、input、button，line-height没有影响
例子1
<div class="demo">
<img src="img/konan.jpg">
</div>
.demo {
line-height: 256px;
}
.demo img {
height:128px;
}
分析：根据以上规则，line-height对块级元素本身没有任何作用，指定的是内部行框盒子的最小高度，而本例中内部是替代行内元素，line-height对其没有影响，那么，最外层div的可视高度是多少？128px？错！是256px。
strut(直译：支撑物)
存在的前提：必须是html5声明
规范中的定义： Each line box starts with a zero-width inline box with the element's font and line-height properties. We call that imaginary box a ”struct"。
解释：每一个行框盒子开始的位置都有一个与之行高、字体大小相同，宽度为零的内联盒子。===> 行框前面有一个宽为0的空字符 ===>幽灵空白节点（张鑫旭大师命名）
例子2
<div class="demo">
<span>此处是一行文字</span>
</div>
case1
.demo {
line-height: 96px;
}
.demo span {
line-height: 20px;
}
case2
.demo {
line-height: 20px;
}
.demo span {
line-height: 96px;
}
以上两种情况下，最外层div的可视高度是多少？都是96px
总结
- 行框盒子的高度是由高度最高的那个内联盒子决定的
- 注意”幽灵空白节点“
那么问题来了，如果是图文混杂的混合的行框盒子，高度如何表现？
只能决定最小高度，最终高度说了不算
why?
1.替代行内元素不受控制
2.vertical-align的影响
（二）vertical-align
- 本页内容来自W3C
- 定义和用法
vertical-align 属性设置元素的垂直对齐方式。
- 说明
1.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
2.允许指定负长度值和百分比值。这会使元素降低而不是升高。
3.在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
- 取值
| 取值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
| text-bottom | 把元素的底端与父元素字体的底端对齐 |
| length | |
| % | 使用 line-height的百分比值排列，允许负值 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值 |
- 划重点
a. 作用前提：只应用于内联元素以及display: table-cell的元素；比如float和position:absolution会使元素块级化，没有理由和vertical-align同时出现
b.相对值：相对于line-height计算
c.基线为何物？
d.父元素的中部指的是？
问题一：基线
- 字母x的下边缘就是我们的基线：
小写字母'x'衍生出了"x-height"概念，指的的是小写字母x的高度，在css中用ex来表示这个相对单位
baseline确定规则:
1.inline-table元素：table第一行的baseline
2.父元素line box：最后一个inline box 的baseline
3.纯文本的内联元素：字符x的下边缘
4.替换元素：替换元素的下边缘
5.inline-block:
(1) 内部没有内联元素，或者overflow不为visible，则：baseline是该元素margin底边缘
(2) 内部有内联元素，baseline是元素里面最后一行内联元素的基线
问题二：父元素的中部
- vertical-align: middle; 把此元素放置在父元素的中部
内联元素：元素的垂直中心点和行框盒子基线往上1/2 x-height处对齐，即字符x的中心交叉位置点。
table-cell：单元格盒子相对于外面的表格行居中对齐。
三、真相只有一个（解决最初的问题）
嫌疑人：line-height，vertical-align，幽灵空白节点
突破口：
line-box的基线，在哪里？
inline级元素的基线，在哪里？
line box前后打个小写字母“x”瞧瞧
现象一：单行文本占据的高度
- 分析：对于字符而言，font-size越大，基线位置越往下，因为文字默认全部是基线对齐，字号不一致的文字在一起，会发现上下位移。
-
解决办法：
“幽灵空白节点”的字体和后面span的字体一样大
改变垂直对齐方式，如：vertical-align:top等
现象二：图片间隙问题（inline元素的水平垂直空隙，常见：img、li等）
- 水平空隙是因为换行引起的，这个换行会变成一个空白，这个空白会被解析为DOM中的文本节点
- 垂直空隙：三大元凶
- 分析：
vertical-align默认值是baseline, 也就是基线对齐。
“幽灵空白节点”的高度是由行高决定的
- 解决办法：
通过display或者position，float等将inline水平的img变成block，一口气干掉三个元凶
使用其他vertical-align值
直接修改line-height值:下面的空隙高度，实际上是文字计算后的行高值和字母x下边缘的距离。因此，只要行高足够小，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑
line-height为相对单位，font-size间接控制
现象三：图文对齐表现
- 分析：
没有经过处理的文字，其基线和line box的基线重合，图片设置vertical-align:middle，其正中心对准父级元素的x的正中心；
但是x字母的正中心并不是其所在的text-box的正中心，而是text-box中心稍稍的偏下了一点
- 解决办法：
我们把“center”包裹起来并为也设置 vertical-align: middle，“center”的基线就不再和line-box的基线重合了，而是稍稍下移了，图文对齐
利用margin-bottom处理
利用vertical-align: length(负值), 设置数值进行对齐
尺寸合适的情况下，可以采用1ex的方式（经验取值基于20px的图标）
现象四：矩形块对齐异常
- 分析：
根据基线的确定规则，框里没有内联元素的，基线是容器的margin下边缘，框内有文字的，基线是文字的基线：字母x的下边缘；因此：左框下边缘与右框x字符底边对齐
- 解决办法：
line-height:0;或者font-size:0;(间隔更大，why？提示：line-height为0，字符占据的位置也为0，高度的起始位置变成字符内容框的垂直中心位置[存在字符下沉]，字符上移，基线也上移)
换一种对齐方式，vertical-align设为其他值
现象五：vertical-align:middle让元素下移而不居中
- 分析：
middle对齐的参照标准是将子元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐
- 解决办法：
一种方式是将最高的元素设为vertical-align:middle，然后将想要居中的也设定为vertical-align:middle
(解释)最高元素设定为vertical-align:middle后，这个元素对于line box来说，baseline就是其中线，再将需要设定垂直居中的元素也设定为vertical-align:middle，它们的baseline必然在最高元素的baseline之上，所以被强制下移，进行居中。
四、化敌为友(简单的应用)
（一）不受字体字号影响的内联元素的垂直居中对齐效果：
内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。设想下，假如我们图标高度就是1ex, 同时背景图片居中，岂不是图标和文字天然垂直居中，而且，完全不受字体和字号的影响。因为ex就是一个相对于字体字号的单位。
<div>
liruifang<i class="icon-arrow"></i>
京东前端<i class="icon-arrow"></i>
</div>
<style type="text/css">
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(img/arrow.png) no-repeat center;
}
</style>
（二）垂直居中
- 单行文字：line-height设置为需要的高度即可，不需要设置height，如果设置则两者需要保持一样。
- 多行文字：高度固定，文字单行或者多行，字体有大有小，如何居中？（提示：利用幽灵空白节点，与图片居中类似）
- 图片：利用幽灵空白节点响应line-height形成高度，此时，图片再来个vertical-align:middle，就可以和这个被行高撑高的幽灵空白节点(近似)垂直对齐了。
近似的原因：字符x的位置都是偏下一点的
middle-1.png- 完全居中：font-size:0，绝对中心线和中线重合。
（三）利用line-block和基线多变之间的关系：处理图文对齐
- 例如，实现一个删除的图标(delete.html)
<i class="icon-delete"></i>删除
<i class="icon-delete">删除</i>（为了使得文字不可见，设置overflow：hidden）
分析：空标签 or overflow:hidden 基线是底边缘，与文字默认不对齐
思路：图标和文字高度一致 + 基线一致 = 对齐！
- 图标和当前高度都是20px：如需合并背景图标，作者建议图标原图统一处理成一种规格再进行合并
- 图标标签里永远有文字：借助:before或者:after伪元素生成一个空格字符
- 潜在字符不可见，但是不使用overflow:hidden，保证基线为里面字符的基线
<style type="text/css">
.box {
line-height: 20px;
}
.icon {
display: inline-block;
width:20px;
height:20px;
white-space: nowrap;
letter-spacing: -1em;
text-indent: -999em;
}
.icon:before {
content:'\3000';
}
/* 具体图标 */
.icon-xxx {
background: url(img/delete.png) no-repeat center;
}
</style>
<div class="box">
<h4>1. 空标签后面跟随文本</h4>
<p><i class="icon icon-delete"></i>删除</p>
<h4>2. 标签里面有“删除”文本</h4>
<p><i class="icon icon-delete">删除</i>看一眼时间</p>
</div>
- 优势：
- 不需要margin和vertical-align的垂直偏移
- 小图标和文字对齐完全不受字体大小影响
- 整个项目小图标和文字对齐的问题都可以解决，节约css代码，降低开发和维护成本
- 说明：20px是经验取值，如果项目设计很大气，例如字号默认16px, 可以改成24px（详见《css世界》）
现象问题（令人抓狂）——> 属性介绍（透过现象看本质）——> 问题剖析（真相只有一个）——> 简单应用（化敌为友）
五、参考文献
- https://drafts.csswg.org/css-inline/#baseline
- http://dev.w3.org/csswg/css-align/#baseline-rules
- https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
- https://christopheraue.net/design/vertical-align
- https://www.cnblogs.com/zhangyachen/p/8035661.html
- https://segmentfault.com/a/1190000014515126
- https://blog.csdn.net/qq_33744228/article/details/78573746
- https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
