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

2つの問題がここにあります

あなたがスペースを持っているHTMLの最初のボタンの後

間のスペースを削除するには、 <div><button>。ここで

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

は、このスペースに対して「戦い」には多くの方法についての素晴らしい記事です：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

明示的に設定されていない場合は、ボタンのスタイル

のマージン/パディングを設定していませんブラウザはマージン/パディングを使用したり、別のスタイルからこれらを継承したりすることがあります。ここ

.btn { 
    padding: 0; 
} 

は、作業フィドルある：https://jsfiddle.net/1cg6uvdh/ギャップが複数表示されるように、私は赤に背景色を変更しました。