Javascript: document.createElement('div') 似乎增加了边距

Question

所以我只是为了学习目的而摆弄一些 Javascript 并注意到一个奇怪的行为。

我创建了按钮，这些按钮在单击时会创建它们自己的副本。第一个新创建的按钮有一个左边距，我找不到解释。有谁知道这样做的原因以及如何删除不需要的间距？

var makeNewBtn = function() {
  var newBtn = document.createElement('button');
  newBtn.className = 'btn';
  newBtn.textContent = 'Click Me';
  newBtn.onclick = makeNewBtn;
  document.getElementById('buttons').appendChild(newBtn);
};

document.getElementsByClassName('btn')[0].onclick = makeNewBtn;

body {
  padding: 25px;
}

.btn {
  height: 100px;
  width: 100px;
  background: beige;
  font: 18px Arial;
  border: 0;
  border-radius: 10px;
  outline: none;    
}

<div id="buttons">
  <button class="btn">Click Me</button>
</div>

result here

Answer 1

这里有两个问题：

您在 HTML

中的第一个按钮后有一个 space

删除 <div> 和 <button> 之间的 space。

<div id="buttons"><button class="btn">Click Me</button></div>

这是一篇很棒的文章，介绍了 "fight" 反对此 space 的多种方法：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

您没有为按钮样式设置 margin/padding

如果未明确设置，浏览器可能会使用 margin/padding，或从其他样式继承。

.btn {
    padding: 0;
}

这是一个有效的 fiddle：https://jsfiddle.net/1cg6uvdh/ 我将背景颜色更改为红色，以便间隙更明显。

Javascript: document.createElement('div') 似乎增加了边距

Javascript: document.createElement('div') seems to add margin

javascript

margin

createelement