多个div使用display:inline-block时候div之间有间隔

昨天我的后端男朋友问了我这么一个问题，给俩div设置完display: inline-block;
为啥会出现间隙，前提是已经设置过margin: 0; padding: 0了，作为前端的我之前还没遇到过这样的问题，一下子给我整不会了。如图;

于是今天百度一波……收集到以下解决方案↓

• ++++解决方法1：
  在父系上加font-size:0；然后，在子div上加一个font-size设置你需要的字体大小

• 原因：
  display:inline-block表示行内块元素，后面自带空格字符（盒子的

  之间的空格和回车折算成了字符），所以有空隙，如果想去掉空隙，在父系上加font-size:0；但是这样的话字体就看不见了，所以还需要在子div上加一个font-size

• 学习文章链接：
  https://www.cnblogs.com/zmdComeOn/archive/2019/06/26/11089610.html

• ++++解决方法2：
  给父元素加上 display: flex;

• 学习文章链接：
  https://blog.csdn.net/qq_43173415/article/details/107335356

效果如下：