div显示保证金

Question

我正在尝试使用div s使用不同的background-color来制作游戏板，所以我写了一些简单的CSS（我只想弄清楚如何在这个阶段做到这一点，我写了手动div - 所以我不包括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 fiddle

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

Answer 1

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

这是一个演示的jsFiddle示例，第一行中的空格被删除。

<强> jsFiddle example

<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个元素。

删除标记中的空格，添加负边距或使用float元素而不是display:inline-block。

Here is another example:

可能是最好的解决方案。

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

jsFiddle with negative margins

jsFiddle with white space removed

Answer 3

由于您不需要将font-size样式设置为0。这样白色空间就不会干扰。

body {
    font-size: 0px;
}

Working demo

Answer 4

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

但无需使用以下内容调整html标记：

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

br { 
   clear: both; 
}

fiddle