gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:05:34 25 4
gpt4 key购买 nike

所以我只是出于学习目的而摆弄一些 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

最佳答案

这里有两个问题:

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;
}

这是一个工作 fiddle :https://jsfiddle.net/1cg6uvdh/我将背景颜色更改为红色,以便间隙更明显。

关于Javascript: document.createElement ('div' )似乎增加了边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36625437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com