1. vertical-align的基础含义
一种简单的 CSS 属性，用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。vertical-align 可以设置让一个元素以自身的哪一个位置对齐,默认为基线对齐。 值：
- baseline基线对齐
- top 让元素顶部与整行的顶部对齐
- bottom 让元素底部与整行的底部对齐
- Middle 让元素的中间在行框的x-height中间对齐
2. ”幽灵空白节点“
我们首先要了解一个概念：四线格。四线格就类似于英语本上的四线格。从上到下依次为顶线、中线、基线、底线。浏览器在处理行内元素和行内块元素的时候都是将这些元素当作是文字处理的，比如图片和表单元素都是当作文字来进行展示的，但是要注意一点，元素的四线格内的空间分布是不均匀的。而浏览器对文字类型元素是用基线对齐的。
这里就有一个比较有意思的点，当我们在一个元素内部嵌套一张图片的时候,图片底部会有一个空隙。因为每个元素一定要包裹住自己内部所有的内容，图片是没有严格的四线格划分,我们认为图片的底线和基线都是图片的底部边缘,这样就无法判断当前行的完整内容了，为了防止未来在当前行的内部出现文字(出现文字就有完整的四线格,也就是有了明确的基线和底线的划分)导致一些问题，浏览器会在当前行框的内部添加一个假想的文字，这个假想的文字我们称为”幽灵空白节点“，用来确定当前行框真实的底线位置。
下面为空隙出现的案例，图片可以自己引入
.box {
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box">
<img src="../image/01.webp" width="200" alt="" /><span>xjpg</span>
</div>
</body>
解决方法也很多，比如：
- 给图片设置vertical-align值不为baseline
- 给当前框内的文字设置字号大小为0
- 给当前行框的line-height设置为0
- 把img的显示属性设置为块元素,给img设置display:block 会有很多元素都会使用到这一概念，使用得当有时会有奇效
3. 行框
说到这里就不得不提到行框这个概念。行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示，我们可以设定一些样式来让它更直观的体现出来，例如上面设定的背景颜色显示的就是整个行框。行框高度等于本行内所有元素中行内框最大的值（注意是元素顶线到底线的高度）。当有多行内容时，每行都会有自己的行框。我们有很多办法来设置它的宽高，例如line-height元素。 line-height：控制两行文字基线之间的距离,在文字大小不变的情况下,基线之间的距离越大,则两行文字之间的间距越大，换种方式说:line-height是设置一行文字(行框)的高度。 如果把line-height设置给行内元素,其实是设置给当前行元素所在的行框的高度，如果把line-height设置给块元素,其实就是控制元素内每一个行框的高度，line-height在设置的时候，会将设置的值平分给基线的上方和下方。
案例：
.content {
font-size: 20px;
width: 200px;
line-height: 20px;
}
.box {
width: 100px;
}
.box span {
line-height: 50px;
}
.box1 {
width: 1000px;
height: 1000px;
background-color: aqua;
line-height: 1000px;
}
</style>
</head>
<body>
<div>
<div class="content">
据央视《新闻联播》报道，当地时间2月21日中午，俄罗斯总统普京在莫斯科商栈展览中心向联邦议会发表国情咨文。据环球网援引俄罗斯卫星通讯社消息，普京此次演讲持续了1小时45分钟，创下了他在俄罗斯联邦议会发表讲话的时间最长纪录。
</div>
<div class="box">
<span>span</span>
<em>em</em>
<em>em</em>
<em>em</em>
<em>em</em>
<em>em</em>
<em>em</em>
</div>
<div class="box1">
<img src="../image/01.webp">
</div>
</div>
</body>
