为什么Div中的按钮之间没有无序的空间？

Question

我有一个带100个按钮的div。宽度为10个按钮，高度为10个按钮。在某些按钮之间我有正常的空间。它不是由其边距或填充引起的。

const genGrille = () => {
  for (let i = 1; i <= 100; i++) {
    let div = document.getElementById("div0");
    div.innerHTML += "<button class='btn'></button>"
    if ((i % 10) == 0) {
      div.innerHTML += "<br>";
    };
  };
};

genGrille();

body {
  margin: 0;
  padding: 0;
}

#div0 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn {
  width: 30px;
  height: 30px;
  background-color: gray;
  border: 0.5px solid red;
  box-shadow: 1px 1px 1px #000;
}

<div id='div0'></div>

我包括了js以防万一。 如果将.btn的宽度和高度更改为20px，则空格消失，但按钮缩小。我想将其保持在30px以上。

谢谢。 ：）