div с отображением поля

Question

Я пытаюсь создать игровое поле с использованием div s с разными background-color s, поэтому я написал несколько простых css (я просто выясню, как это сделать на этом этапе, и я написал div s вручную - так что im не включая html/js)

.grass { 
    background-color: oliveDrab; 
} 

.dirt { 
    background-color: sandyBrown; 
} 

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

, когда я его визуализировал, и был запас. как так:

так я проверил поджигатель, и это показывает, marginborder и padding является 0!!

DEMO fiddle.

У меня возникло ощущение, что я пропустил некоторые чрезвычайно простые знания css здесь.

Answer 1

согласен с @ j08691: Инлайн и элементы уровня встроенного блока чувствительны к белому пространству.

Но нет необходимости корректировать свой HTML-разметку с:

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

br { 
    clear: both; 
} 

fiddle.

Answer 2

Это потому, что есть inline-block элементов.

Либо удалите пробел в разметке, добавьте отрицательный запас или используйте поплавковые элементы, а не display:inline-block.

Here is another example:

Вероятно, лучшим решением.

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

jsFiddle with negative margins

jsFiddle with white space removed

Answer 3

Линейные и элементы уровня встроенный блок чувствительны к белому пространству.

Вот пример 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 4

Поскольку вам не нужно устанавливать текст font-size стиль 0. Таким образом, белые пробелы не будут мешать.

body { 
    font-size: 0px; 
} 

Working demo