“ 本文正在参加「金石计划」 ”
解读： CSS深入理解vertical-align和line-height的基友关系
解决方案：
1. 让vertical-align失效
developer.mozilla.org/zh-CN/docs/…
2.使用其他vertical-align值
- top：（内联）元素的顶边和行内最高元素的顶边对齐
- bottom：（内联）元素的底边和行内最高元素的低边对齐
bottom/middle/top都是可以的。
3.父元素 line-height: 0
加在自己身上是这样的
加在父元素上面 子元素中的空格没有了行高 就没有了高度
4. line-height为相对单位，font-size间接控制
font-size: 0;
规则
测试：
应该是以一行中有内联元素的X底部为基线
代码：
<!--
* @Description:
* @Author: lumingqing
* @Date: 2023-04-17 16:06:22
* @LastEditTime: 2023-04-17 19:53:50
* @LastEditors:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50%;
height: 500px;
border: 1px solid red;
}
.dib-baseline {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #cad5eb;
background-color: #f0f3f9;
}
.tow {
/* font-size: 0; */
/* line-height: 0; */
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #cad5eb;
background-color: #f0f3f9;
}
</style>
</head>
<body>
<div>
<!-- <span class="tow">x-baseline</span>
<span class="tow">x-baseline</span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="tow">x-baseline</span>
<span class="tow">x-baseline</span> -->
<!-- m没有文字 -->
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
<span class="dib-baseline"></span>
</div>
</body>
</html>
案例：
<!--
* @Description:
* @Author: lumingqing
* @Date: 2023-04-17 16:06:22
* @LastEditTime: 2023-04-17 19:39:44
* @LastEditors:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.dib-baseline {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #cad5eb;
background-color: #f0f3f9;
}
.tow {
/* font-size: 0; */
line-height: 0;
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #cad5eb;
background-color: #f0f3f9;
}
</style>
</head>
<body>
<div>
<span class="dib-baseline"></span>
<span class="tow">x-baseline</span>
</div>
</body>
</html>
没有设置 line-height: 0;
line-height: 0;
因为字符实际占据的高度是由行高决定的，当行高变成0的时候，字符占据的高度也是0，此时，高度的起始位置就变成了字符content area的垂直中心位置，于是，文字就一半落在框框的外面了
需要把字体设置为0 .tow {font-size: 0; }
演示代码：
<!--
* @Description:
* @Author: lumingqing
* @Date: 2023-04-17 17:00:37
* @LastEditTime: 2023-04-17 19:57:09
* @LastEditors:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
font-size: 0;
width: 50%;
/* padding: 20px; */
margin: 20px auto;
background-color: #2dd635;
text-align: justify;
line-height: 0;
}
img {
display: inline-block;
/* padding-bottom: 20px; */
}
.justify-fix {
display: inline-block;
width: 128px;
border-bottom: 1px dashed red;
}
</style>
</head>
<body>
<!-- display: block" -->
<!-- vertical-align: bottom -->
<!-- line-height: 5px -->
<div style="width: 100%; background-color: salmon; font-size: 0px">
<img style="width: 200px; height: 300px" src="./00004.jpg" alt="" />
<!-- style="background-color: #fff; line-height: 5px; display: inline-block" 错误样式 加了line-height: 5px; -->
<span style="background-color: #fff; display: inline-block"
>xxx实际上，这种行为表现，就跟图片前面或者后面有一个宽度为0的空格元素表现是一致的。但是，空格是透明的，</span
>
</div>
<div class="box">
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<img src="./135.jpg" width="128" />
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix">x-baseline</i>
<!-- <i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i> -->
<!-- 里面统一加内容 -->
<!-- <i class="justify-fix">x-baseline</i>
<i class="justify-fix">x-baseline</i>
<i class="justify-fix">x-baseline</i>
<i class="justify-fix">x-baseline</i>
<i class="justify-fix">x-baseline</i> -->
<!-- 加空格也是一种解决方案 里面的基线都对齐了 -->
<!-- <i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i>
<i class="justify-fix"> </i> -->
</div>
<script></script>
</body>
</html>
