Несогласованное поведение inline-block элементов при создании с помощью JavaScript

У меня есть несколько таких же div, у которых свойство display установлено на inline-block. Я знаю, что элементы inline-block по умолчанию имеют некоторый запас вокруг них, поэтому без каких-либо изменений я ожидал бы некоторого свободного пространства вокруг этих элементов (этот вопрос не об их удалении).

Если я просто жестко закодирую их в файл html, они будут вести себя так, как я от них ожидаю.

* {
  margin: 0;
  padding: 0;
}

div.box {
  width: 100px;
  height: 40px;
  background: red;
  display: inline-block;
}

<div tabindex = "1" class='box'></div>
<div class='box'></div>
<div class='box'></div>

Но если я начну добавлять их через JavaScript, верхнее и нижнее поля останутся прежними, а левое и правое, кажется, исчезнут.

В этом коде, если я перехожу к первому элементу, а затем нажимаю Enter, новый div создается и добавляется в DOM, но, как упоминалось выше, поля исчезают, когда я начинаю добавлять их (нажимая несколько раз Enter).

const btn = document.querySelector('div.box');

btn.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    const box = document.createElement('div');
    box.className = 'box';
    document.body.appendChild(box);
  }
});

* {
  margin: 0;
  padding: 0;
}

div.box {
  width: 100px;
  height: 40px;
  background: red;
  display: inline-block;
}

<div tabindex = "1" class='box'></div>

Кто-нибудь знает, почему существует разница в том, как эти div отображаются при жестком кодировании и добавлении программным способом? Что-то не так с кодом JavaScript?