1

I want to lay out a grid by appending divs to body and letting them wrap around the screen. Why am I getting spacing between the rows? It remains regardless of margin & padding; see below image.

Here is the markup:

<!DOCTYPE html>
<html>
    <head>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
    </head>
    <body>
        <style>
            .square {
                display: inline-block;
                width: 80px;
                height: 80px;
                border: black thin solid;
            }
        </style>
        <script>
            $(function() {
                for( var i=0; i<60; i++ ) {
                    $('body').append( $('<div class="square"></div>') );
                }
            });
        </script>
    </body>
</html>

Here is what it looks like:

http://dl.dropbox.com/u/257081/squares.png

Phillip
  • 5,366
  • 10
  • 43
  • 62

4 Answers4

3

Because it's inline-block, it's treated like a line of text, so it gets some space between each line. You can alter the line-height or font-size of the container to fix it (or both, to be on the safe side):

body {
    font-size: 1px;
    line-height: 0;
}
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
2

This should fix it nice and good

body { line-height: 0;}
Roderick Obrist
  • 3,688
  • 1
  • 16
  • 17
1

Solution: Add float: left to your .square class.

Refer this fiddle: http://jsfiddle.net/techfoobar/VdJhp/1/

techfoobar
  • 65,616
  • 14
  • 114
  • 135
0

It's your display that's doing it. You have it set to inline-block. Try doing float: left; instead. That took care of it for me.

Tango Bravo
  • 3,221
  • 3
  • 22
  • 44