Javascript: document.createElement ('div') marjı

Question

ekleyeceğe benziyor, bu yüzden öğrenme amacıyla bazı Javascript ile uğraştım ve garip bir davranış farkettim.

Tıklamada kendilerinin yinelemesini oluşturan düğmeler oluşturdum. Yeni oluşturulan ilk düğme için bir açıklama bulamadığım bir sol kenar boşluğu var. Bunun nedenini ve istenmeyen boşlukları nasıl kaldıracağını bilen var mı? Sen arasında boşluk çıkarın HTML

ilk düğmeye sonra boşluk var

:

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