通过JavaScript创建inline-block元素时的渲染不一致问题

这事儿的核心其实是HTML中的空白字符在作祟，你的JavaScript代码本身没有问题，只是两种添加元素的方式在DOM结构上有细微差别：

1. 硬编码元素的间距来源 #

当你在HTML文件里直接写多个inline-block的div时，比如：

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

这些div之间的**空格（或者换行、制表符）**会被浏览器解析成一个空白字符。因为inline-block元素属于行内排版流，浏览器会把连续的空白字符合并成一个空格渲染出来，这就是你看到的左右间距。

2. 动态添加元素为何没有间距 #

用JavaScript的document.createElement创建元素，再通过appendChild添加到DOM时，你只是把新的div节点直接追加到了body里，没有在新元素和之前的元素之间插入任何空白字符。没有空白字符，浏览器自然不会渲染出间距，所以新添加的div会和前一个紧紧挨在一起。

验证与还原硬编码效果 #

如果想要动态添加的元素和硬编码的表现一致，只需要在添加div的同时，插入一个包含空白字符的文本节点即可：

const btn = document.querySelector('div.box');
btn.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    const box = document.createElement('div');
    box.className = 'box';
    // 插入空白字符，模拟HTML中的空格
    document.body.appendChild(document.createTextNode(' '));
    document.body.appendChild(box);
  }
});

这样每次添加新div时，都会在它和前一个元素之间插入一个空格，浏览器就会渲染出和硬编码一样的左右间距了。

内容的提问来源于stack exchange，提问作者Matus Dubrava