How do I remove the borders around each div?
Question
I am creating a sketcher tool that allows users to color the 'cells' after they hover over the cell.
The problem I am facing now is that there are white borders around each cell and I can't seem to remove it. I have tried making border: none; border-style:none; padding: 0px; margin: 0px border: none; border-style:none; padding: 0px; margin: 0px border: none; border-style:none; padding: 0px; margin: 0px but all don't seem to work.
Here is my the relevant CSS. Github repo
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>
I'm actually using Javascript to add the cells in.
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);
}
}
}
1 answers
solution1
0 ACCPTED 2020-12-08 14:21:25
What about outline:none; Removing btw it will end up with spaces under each line
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.