我正在创建一个草图工具，允许用户在悬停在单元格上后为"单元格"上色。
我现在面临的问题是，每个单元格周围都有白色边框，我似乎无法删除它。我尝试过制作border: none; border-style:none; padding: 0px; margin: 0px，但似乎都不起作用。
这是我的相关CSS。Github回购
body {
background-image: url("images/bg.png");
background-size: cover;
font-family: 'Orbitron', sans-serif;
}
#container {
height: 960px;
width: 960px;
align-items: center;
margin: 0 auto;
}
.cell {
background-color: black;
height: 60px;
width: 60px;
display: inline-block;
outline: auto;
}
HTML:
<body>
<h1 class="title glow">RETRO SKETCH</h1>
<div id="container">
</div>
<div class="controls">
<button class="button glow">Reset</button>
</div>
<script src="script.js"></script>
</body>
我实际上是在使用Javascript添加中的单元格
function createGrid(len) {
len = len || 16;
const container = document.querySelector('#container');
const per_box_len = Math.floor(960 / len);
for (let i = 0; i < len; i++) {
for (let j = 0; j < len; j++) {
const box = document.createElement('div');
box.classList.add('cell');
box.style.width = `${per_box_len}px`;
box.style.height = `${per_box_len}px`;
container.appendChild(box);
}
}
}
outline:none;删除btw后，每行下都会有空格