Remove margin between rows of overflowing inline elements

问题

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.)

回答1:

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.

回答2:

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

回答3:

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/

来源：https://stackoverflow.com/questions/5358974/remove-margin-between-rows-of-overflowing-inline-elements