3

I'm creating a tile-based game and am using block rendering to update a large list of tiles. I'm attempting to do this in the most simple manner, so I've been trying to work with HTML's default layouts. Right now I'm creating 'inline-blocks', omitting whitespace between the elements to avoid horizontal spaces in between them but when the blocks overflow and create a new line there is some vertical margining in which I do not know how to remove.

Example to make this a bit clearer: http://jsfiddle.net/mLa93/13/

(Pretty much I just need to remove the spacing between the block rows while retaining the simple markup.)

Ian
  • 33
  • 2

3 Answers3

0

Use display: block and set float: left. See this fork: http://jsfiddle.net/q5eSG/

Adam
  • 12,236
  • 9
  • 39
  • 44
0

Instead of using display: inline-block, simply float the div elements.

Then, you just need to clear the floats on your #container element, which I do so using overflow: hidden;

Check out the working example: http://jsfiddle.net/Ymz3m/

wsanville
  • 37,158
  • 8
  • 76
  • 101
0

In the effort of keeping your code as close as possible to how it was:

http://jsfiddle.net/mLa93/20/

  • Add line-height: 0 to #container.
  • Add the hacks to make display: inline-block work in IE7.
thirtydot
  • 224,678
  • 48
  • 389
  • 349