html - 显示边距的 div

Question

我正在尝试使用div具有不同background-colors 的 s 制作游戏板，所以我写了一些简单的 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！

演示小提琴。

我被引导觉得我在这里缺少一些非常基本的 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>

Answer 2

因为有inline-block元素。

删除标记中的空白，添加负边距，或使用浮动元素而不是display:inline-block.

这是另一个例子：

可能是最好的解决方案。

body {
    width:150px;
}
div {
    float:left;
}

带有负边距的jsFiddle

jsFiddle删除了空格

Answer 3

由于您不需要将文本设置font-size为0. 这样空白就不会干扰。

body {
    font-size: 0px;
}

工作演示

Answer 4

同意@j08691：内联和内联块级元素对空白很敏感。

但无需调整您的 html 标记：

div {
   height: 25px;
   width: 25px;
   display: block;
   float: left;
}

br { 
   clear: both; 
}

小提琴。