div displaying a margin

Question

i am trying to make a game board using divs with different background-colors so i wrote some simple css (i am just figuring out how to do it at this stage, and i wrote the divs in manually - so im not including the html/js)

.grass {
    background-color: oliveDrab;
}

.dirt {
    background-color: sandyBrown;
}

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

when i rendered it, and there was a margin. like so:

so i checked firebug and it shows margin,border, and padding is 0!!

DEMO fiddle.

i am being led to feel i am missing some extremely basic css knowledge here.

Answer 1

Inline and inline-block level elements are sensitive to white space.

Here's a jsFiddle example of your demo with the white space in the first line removed.

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

It is because there are inline-block elements.

Either remove the white space in your markup, add a negative margin, or using float elements as opposed to display:inline-block.

Here is another example:

Probably the best solution.

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

jsFiddle with negative margins

jsFiddle with white space removed