HTML标签换行导多个inline-block元素不能在同一行，img之间会有空格

一、当让两个各占50%的元素使用inline-block位于同一行时，HTML的标签换行会导致右边元素掉下去。

如下代码：

<style>
    *{
      margin: 0;
      padding: 0;
      font-size: 20px;
    }
     .frame{
       width: 100%;
     }
    .frame1{
      background-color: #3b93ff;
      display: inline-block;
      width: 50%;
    }
    .frame2{
      background-color: #3d9400;
      display: inline-block;
      width: 50%;
    }
  </style>

<div class="frame">
  <div class="frame1"><div class="a1"><a>123</a></div> </div>
  <div class="frame2"><div class="a2"><a>123</a></div></div>
</div>

结果如图：右边元素掉下去了

当让这两个div位于同一行时：
<div class="frame1"><div class="a1"><a>123</a></div> </div><div class="frame2"><div class="a2"><a>123</a></div></div>
此时这两个元素才位于同一行

二、三张图位于同一行时，每张图之间会有间隔

<div class="img3">
    <img src="waifu.png">
    <img src="waifu.png">
    <img src="waifu.png">
</div>

此时效果图如图：

每张图会有间隔，当代码取消换行之间，间隔会消失

用JS取img3节点下的第一个子节点，你会发现返回的是text节点，你查看每个img节点，你会发现每个img节点的下一个兄弟节点都是text节点