为什么细胞之间有空隙？答案

【问题标题】：Why is there gaps between the cells?为什么细胞之间有空隙？
【发布时间】：2022-11-23 11:43:52
【问题描述】：

我试图制作一个可自定义的网格（默认为 16x16），但在创建时，单元格之间存在间隙。

CSS：

#container{
    position: relative;
    margin: auto;
    width: 800px;
    height: 800px;
    border: none;
    outline: 2px solid red;
    padding: 0;
}

.grid{
    margin: 0;
    padding: 0;
    outline: 1px solid black;
    border: none;
    display: inline-block;
}

脚本：

let gridSize = 0;

const btn = document.querySelector("#btn");
btn.addEventListener("click", function(){
    let input = prompt("Enter a grid size (100 or lower):");
    createGrid(input);
});

const container = document.querySelector("#container");

createGrid(16);

function createGrid(rows){

    rows = parseInt(rows);
    gridSize = rows * rows;
    container.innerHTML = "";

    for(let i = 0; i < gridSize; i++){
        const div = document.createElement("div");
        div.className = `grid`;
        container.appendChild(div);
    }

    const style = document.createElement("style");
    style.innerText = `  
    .grid{
        height: ${800/rows}px;
        width: ${800/rows}px;
    }`;
    const body = document.head.appendChild(style);
}

总之，网格是通过将其附加到 html 中的容器而使用 Javascript 制作的。我把它包括在内以防相关，因为样式有一些变化，我想它与此有关。

【问题讨论】：

标签： javascript css

【解决方案1】：

看来差距是由container的line-height造成的。

在container 上设置line-height: 0 将消除差距。

希望这会有所帮助。

例子：

#container {
  /*   Add ? */
  line-height: 0;

  position: relative;
  margin: auto;
  width: 800px;
  height: 800px;
  border: none;
  outline: 2px solid red;
  padding: 0;
}

【讨论】：

【解决方案2】：

我怀疑使用默认显示块的 div #container 导致了此问题。您可以通过添加以下内容使用 flexbox 修复它：

display: flex;
flex-flow: row wrap;

到你的#container css

【讨论】：