此问题在此处已有答案：

Vertical space between two inline-block and a block element（5个答案）
3天前关闭。
我试图使一个可定制的网格（默认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;
}

JavaScript语言：

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

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