CSS：为什么这里有额外的“边距”？

Question

我需要在一个矩形中放入 5 个正方形。乍一看似乎很容易... 100% 是外部矩形的宽度，所以 20% 必须是每个正方形的宽度，包括边框并将边距设置为 0。

然而，浏览器似乎在方块之间插入了“某物”，但检查器没有显示任何边距……而且我只能容纳 4 个……

这是我的测试代码：

<div class="wr">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

和相应的CSS：

.wr {
  min-width: 5rem;
  max-width: 5rem;
  width: 5rem;
  min-height: 1rem;
  max-height: 1rem;
  height: 1rem;
  border: 1px solid black;
}

.b {
  display: inline-block;
  min-width: 20%;
  max-width: 20%;
  min-height: 100%;
  background-color: red;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

https://jsfiddle.net/lucrus/6Lzy45va/7/

我错过了什么？