先放个结论，哈哈哈哈哈。 下面有详细介绍产生问题的原因
解决办法
# 第一种办法,取消元素的行内元素特性，使其不存在垂直对齐特性
display:flex;
# 第二种办法
display: inline-flex;
vertical-align:top;
// vertical-align: bottom;
提出问题
文字文字蚊子
正常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;
如果有用的话，点点赞喽~~~