div显示保证金

Question

我正在尝试div用不同的background-colors 制作一个游戏板,所以我写了一些简单的CSS(我只是想弄清楚如何在这个阶段做到这一点,我div手动编写了s - 所以我不包括html/js)

.grass {
    background-color: oliveDrab;
}

.dirt {
    background-color: sandyBrown;
}

div{
    height: 25px;
    width: 25px;
    display: inline-block;
    margin: 0;
}

当我渲染它,并有一个余地.像这样:

所以我检查萤火虫,它表明margin,border和padding是0!

DEMO小提琴.

我被引导觉得我在这里缺少一些非常基本的CSS知识.

Answer 1

内联块和内联块级元素对空白区域敏感.

这是演示的jsFiddle示例,第一行中的空格被删除.

jsFiddle例子

<div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div>