使用display: inline-block无法让图片与文本同行显示如何解决？

问题核心原因 #

1. 两个inline-block元素之间如果存在换行、空格，会默认产生空白间隙，导致间距偏大
2. 图片默认的vertical-align属性为baseline，和文本对齐时会出现错位，看起来不在同一行
3. 你设置的图标尺寸为1vw，远小于文本的2.5vw，尺寸差也会加剧对齐异常
4. 你代码中写的.IconText类在HTML中没有被引用，属于无效样式

推荐解决方案（Flex布局，更易控制） #

给父容器添加flex布局，直接控制对齐方式和间距即可，无需给子元素设置inline-block：

/* 新增父容器样式 */
.Comment_Icon {
  display: flex;
  align-items: center; /* 保证图标和文本垂直居中对齐 */
  gap: 0.2vw; /* 自定义二者间距，需要贴近就调小数值，可设为0 */
}

/* 调整原图标样式，适配文本大小 */
.Student_Icon {
  height: 2vw;
  width: 2vw;
}

/* 原Comments样式可保留，无需加inline-block */
.Comments {
  font-size: 2.5vw;
}

兼容方案（保留inline-block的修改方式） #

如果要沿用inline-block的写法，调整如下：

.Student_Icon {
  height: 2vw;
  width: 2vw;
  display: inline-block;
  vertical-align: middle; /* 对齐文本 */
  margin-right: 0.2vw; /* 控制间距 */
}
.Comments {
  font-size: 2.5vw;
  display: inline-block;
  vertical-align: middle; /* 对齐图标 */
}

同时需要把HTML中img标签和Comments的div标签之间的换行、空格全部删掉，写成紧挨着的形式，消除默认空白间隙：

<div className="Comment_Icon">
  <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img><div className="Comments">5 Class Comments</div>
</div>

内容的提问来源于stack exchange，提问作者Youssef Moussa