css - 水平和垂直 DIV 间距不一致

Question

我很困惑为什么在某些浏览器上我得到正方形之间的规则网格间距，而另一些浏览器在垂直方向上得到的间距与水平方向上的间距不同。我正在使用 Chrome 版本 96.0.4664.93（官方版本）（x86_64）。

有人告诉我一个小技巧，border-right: 4px solid white;即div>div. 但是，我想知道为什么渲染不一致。

grid_on_Chrome _96 , grid_on_Electron

div>div {
  display: inline-block;
  background-color: rgb(68, 157, 230);
  border: 2px solid white;
}

<div>
  <div style="width: 50px; height: 
   50px;">
  </div>
  <div style="width: 50px; height: 
   50px;">
  </div>
</div>
<div>
  <div style="width: 50px; height: 50px;">
  </div>
  <div style="width: 50px; height: 50px;">
  </div>
</div>