一文搞懂CSS line-height和vertical-align _CSS

在学习css期间，不少同学感觉基本能理解line-height和vertical-align的用法，但是遇到一些具体问题的时候，又发现搞不太明白了，这主要是对一些相关概念理解得还不够透彻，今天我们就通过本文一步步帮大家彻底搞懂这2个概念。
一、相关概念
要理解line-height和vertical-align这2个概念，我们同时也要掌握一些相关的概念，下面我们就给大家一一介绍。
1.1 内联盒子
块状元素的每一行，就是由内联盒子组成的，内联盒子分为具名内联盒子和匿名内联盒子。
* 如果被行内元素包裹，属于具名内联盒子。
* 如果只是光秃秃的文字没有被行内元素包裹，属于匿名内联盒子。
我们来具体举个例子：
div {
width: 400px;
font-size: 30px;
background-color: gold;
}
span {
background-color: yellowgreen;
}
<div>今天的<span>月亮</span>好美啊！</div>
页面展示效果如下：

文章插图
黄色背景是一个p标签，它的一行包含了：①光秃秃的文字“今天的”；②一个行内元素“<span>月亮</span>”；③光秃秃的文字“好美啊！” 。其中①和③就属于匿名内联盒子，②属于具名内联盒子。
这里我们再对比一下2种内联盒子的高度：
上例中，我们知道div的高度height是由匿名内联盒子和具名内联盒子的高度撑起的行高决定的，显示为40px：

文章插图
现在我们在浏览器端把span标签的文字大小改成0，那么此时div完全是由具名内联盒子撑起的行高，我们看到div高度同样是40px 。

文章插图
因此我们可以得出结论，不论是具名内联盒子还是匿名内联盒子，它们的空间高度是由字体大小决定的，两者没有区别。所以当我们需要查看内联盒子效果时，可以用span标签来表示，因为其可以设置背景色会更直观。
1.2 行框盒子
块级元素的每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成的。行框上边界要包裹住所有内联盒子的上边界，行框的下边界要包裹住所有内联盒子的下边界。

文章插图
在浏览器中，我们用光标选中一行的效果，即下图里的整个蓝色区域就是一个行框盒子的区域（注意：此种情况只适用于自然撑开的高度，设置行高拉开的距离，蓝色区域会大于行款盒子高度）。

文章插图
1.3 基线
基线是内联盒子中小写字母的x的下边缘的一条线，为了垂直方向对齐用的。
默认情况下，行框盒子内的所有元素都是相对父元素在垂直方向上基线对齐。
举例如下：

文章插图
上面三个”xx“，其中第一个①是直接写在父元素div标签里的，②③是分别写在2个span标签里，默认情况下span标签里的内容在垂直方向上会与①里的x的底边对齐。
这里要注意，即使标签里写的不是小x，也有小x这样的一个空间对齐概念存在。为了帮助大家更好理解，上例中，我们把div里写的“xx”去掉了，显示效果如下：

文章插图
我们可以看到，两个span标签垂直方向的位置依然没有变化。
1.4 幽灵节点
在html5文档声明中，内联元素的所有解析和渲染就像每行行框盒子前面有一个空白节点，这个节点是透明的，没有任何宽度，也没有办法用脚本获得（幽灵节点）。但是它只在使用html5文档声明的时候才存在。
我们写下如下代码：
<!DOCTYPE html>
<style>
body {
margin: 0;
background-color: gold;
}
#box {
width: 1200px;
padding: 0 50px;
margin-top: 20px;
font-size: 100px;
background-color: black;
}
span {
background-color: yellowgreen;
}
img{
width: 100px;
}
</style>
<div id="box">
<img src=https://www.isolves.com/it/cxkf/yy/CSS2/2023-06-30/"./233.png" >
<span>中文aljx字符</span>
</div>
页面的展示效果如下，我们看到图片底边和span标签的文字x底边存在对齐现象，因此，拉高了行高，图片底边和div底边没有重合。