Margin Div

Question

I am trying to create a playing field using a div with different background-color , so I wrote some simple css (I just figure out how to do this at this point, and I wrote the div in manual mode - so im doesn't include html / js)

 .grass { background-color: oliveDrab; } .dirt { background-color: sandyBrown; } div{ height: 25px; width: 25px; display: inline-block; margin: 0; } 

when I did it, and there was a margin. So:

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

Demo script .

I anticipate that I missed some extremely basic css knowledge here.

Answer 1

Agree with @ j08691: Line-level and inline-block elements are space-sensitive.

But no need to customize your html markup with:

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

fiddle

Answer 2

Elements of string and embedded blocks are space-sensitive.

Here is an example jsFiddle demonstration with a space in the first line.

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 3

This is because there are inline-block elements.

Either remove the space in your markup, add a negative margin, or use float elements, not display:inline-block .

Here is another example:

Probably the best solution.

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

jsFiddle with negative fields

jsFiddle with removed space

Answer 4

Since you do not need text, set the font-size style to 0 . Thus, white spaces will not interfere.

 body { font-size: 0px; } 

Working demo