解决div元素高度不等于内容高度撑开的问题

• 先放个结论，哈哈哈哈哈。 下面有详细介绍产生问题的原因

解决办法

# 第一种办法,取消元素的行内元素特性，使其不存在垂直对齐特性
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 会使得子元素的垂直对齐方式发生变化

因为在行内弹性盒子中，子元素的默认垂直对齐方式是基线对齐。
基线对齐是指将元素的基线与相邻元素的基线对齐，而不是根据内容的实际高度进行对齐。基线通常是文本中字母的底部对齐线。

应该是图片导致左右元素对齐后产生了多余的高度补偿。

可以拿这张图去理解：

在来看我遇到的问题：

1. 外部容器元素的高度
   

2. 内部子元素只有的实际高度
   

3. 我们内部子元素设置的是 display：inline-flex ，有着行内元素的特性。
   产生一个疑问？这不是只有一个元素么，为什么也会产生影响。
   这是因为浏览器认为每个 line-box 的起始位置都有一个宽度为 0 的字符（CSS 文档将其称为 strut），并将其纳入 line-box 的高度的计算中。

   看不见的字符，看得见的影响。

看了这张图，应该就会知道，为什么外层元素会产生多出的3px影响了。有个空白字符和我们的元素产生了作用，影响了高度。

解决办法

# 第一种办法,取消元素的行内元素特性，使其不存在垂直对齐特性
display:flex;
# 第二种办法，给元素设置对齐方式，不按照baseline去对齐
display: inline-flex;
vertical-align:top;
// vertical-align: bottom;

如果有用的话，点点赞喽~~~