所以我只是为了学习而乱用一些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>
答案 0 :(得分:1)
这里有两个问题:
在HTML
中的第一个按钮后面有空格删除<div>
和<button>
之间的空格。
<div id="buttons"><button class="btn">Click Me</button></div>
这是一篇很棒的文章,讲述了很多方法,以及#34;战斗&#34;针对这个空间:https://css-tricks.com/fighting-the-space-between-inline-block-elements/
您没有为按钮样式设置边距/填充
如果没有明确设置,浏览器可能会使用边距/填充,或者从其他样式继承它们。
.btn {
padding: 0;
}
这是一个工作小提琴:https://jsfiddle.net/1cg6uvdh/我将背景颜色更改为红色,以便间隙更明显。