javascript - 通过 JavaScript 创建时内联 block 元素的行为不一致

Question

我有一堆相同的 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 添加它们，顶部和底部边距保持不变，但左右似乎消失了。

在这段代码中，如果我切换到第一个元素然后按回车键，则会创建新的 div 并将其添加到 DOM 中，但如上所述，边距消失了当我开始添加更多的时候(多次点击回车)。

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 代码有问题吗？

Answer 1

您混淆了空白和页边距。内联元素对代码中的空格很敏感，因此当您通过 JS 生成它们时，除非您手动添加，否则该空格不存在。看到这一点的最简单方法是在您的第一个示例中，将所有 div 放在同一行上，没有空格或回车符。

* {
  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>