HTML直接编写与JS创建的Button间距不一致问题求解

HTML中直接编写的<button>之间出现的额外间距，本质是元素之间的换行、空格等空白字符被浏览器解析成了可显示的空白内容——因为<button>默认是inline-block类型，这类元素会像文本一样保留空白字符的空间。而通过JavaScript创建元素并直接append时，元素之间没有插入任何空白字符，所以不会产生间距，这和margin:0无关，因为这个间距不是外边距导致的。

要让两种方式显示效果一致，有两种方向可选：

方向一：消除HTML中button的间距（和JS创建的效果对齐） #

方法1：直接移除HTML里button之间的空白 #

把两个button标签连在一起，去掉中间的换行和空格：

<div>
  <button>Done</button><button>Delete</button>
</div>

方法2：通过CSS隐藏父元素的空白字符 #

给包含button的父div设置font-size: 0（空白字符的大小由父元素字体决定），再给button恢复正常字体大小：

.button-group {
  font-size: 0;
}
.button-group button {
  font-size: 16px; /* 根据需求调整为正常字体大小 */
}

对应的HTML修改：

<div class="button-group">
  <button>Done</button>
  <button>Delete</button>
</div>

方法3：使用负margin（不推荐） #

通过负margin抵消空白字符的宽度，但这个数值依赖于当前字体，兼容性和稳定性较差：

button + button {
  margin-left: -4px; /* 数值需根据实际字体调整 */
}

方向二：给JS创建的button添加间距（和HTML的效果对齐） #

方法1：插入空白文本节点 #

在两个button之间手动添加一个包含空格的文本节点，模拟HTML中的空白字符：

const div = document.createElement("div");
const doneBtn = document.createElement("button");
doneBtn.innerText = "Done";
const delBtn = document.createElement("button");
delBtn.innerText = "Delete";

div.append(doneBtn);
div.append(document.createTextNode(" ")); // 添加空白字符
div.append(delBtn);

document.body.append(div);

方法2：通过margin模拟间距 #

直接给第二个button设置左边距，数值和HTML中空白字符的宽度接近（通常4px左右）：

const div = document.createElement("div");
const doneBtn = document.createElement("button");
doneBtn.innerText = "Done";
const delBtn = document.createElement("button");
delBtn.innerText = "Delete";

delBtn.style.marginLeft = "4px"; // 设置左边距模拟空白间距

div.append(doneBtn);
div.append(delBtn);
document.body.append(div);

优先选择方向一的方法1或方法2，这两种方案更稳定，不会依赖特定字体或手动计算数值。

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