- 先放个结论,哈哈哈哈哈。 下面有详细介绍产生问题的原因
解决办法
# 第一种办法,取消元素的行内元素特性,使其不存在垂直对齐特性
display:flex;
# 第二种办法
display: inline-flex;
vertical-align:top;
// vertical-align: bottom;
提出问题
<div class="red">
<div class="box">
<img src="../assets/logo.png" alt="" />
<span>文字文字蚊子</span>
</div>
</div>
<style>
.red {
background-color: red;
}
.box {
display: inline-flex;
}
img {
width: 30px;
height: 30px;
line-height: 30px;
}
span {
font-size: 24px;
line-height: 30px;
}
</style>
正常red盒子的高度应该是内容撑开30px。实际是34px。
使用display:inline-flex 而不使用 dispaly:flex 的好处
当存在两个div的时候,可以水平排列,不会独占一行。
如果设置成display:flex 的时候
产生问题的原因
inline-flex 会使得子元素的垂直对齐方式发生变化
因为在行内弹性盒子中,子元素的默认垂直对齐方式是基线对齐。
基线对齐是指将元素的基线与相邻元素的基线对齐,而不是根据内容的实际高度进行对齐。基线通常是文本中字母的底部对齐线。
应该是图片导致左右元素对齐后产生了多余的高度补偿。
可以拿这张图去理解:
在来看我遇到的问题:
-
外部容器元素的高度
-
内部子元素只有的实际高度
-
我们内部子元素设置的是 display:inline-flex ,有着行内元素的特性。
产生一个疑问?这不是只有一个元素么,为什么也会产生影响。
这是因为浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符(CSS 文档将其称为 strut),并将其纳入 line-box 的高度的计算中。看不见的字符,看得见的影响。
看了这张图,应该就会知道,为什么外层元素会产生多出的3px影响了。有个空白字符和我们的元素产生了作用,影响了高度。
解决办法
# 第一种办法,取消元素的行内元素特性,使其不存在垂直对齐特性
display:flex;
# 第二种办法,给元素设置对齐方式,不按照baseline去对齐
display: inline-flex;
vertical-align:top;
// vertical-align: bottom;