i am trying to make a game board using div
s with different background-color
s so i wrote some simple css (i am just figuring out how to do it at this stage, and i wrote the div
s 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.
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With