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

Question

我有一堆相同的divs 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在硬编码和编程添加时这些s的呈现方式有所不同？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>