div displaying a margin

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; }
  height: 25px;
  width: 25px;
  display: inline-block;
  margin: 0;

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

margin added

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

no margin in style

DEMO fiddle.

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


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