Question

我想通过将div添加到body并让它们环绕屏幕来布局网格。为什么我在行之间得到间距？它仍然是保证金和填充;见下图。

这是标记：

<!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>

这是它的样子：

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

Answer 1

因为它是inline-block，所以它被视为一行文字，所以它在每一行之间得到一些空间。您可以更改容器的line-height或font-size来修复它（或两者都是安全的）：

body {
    font-size: 1px;
    line-height: 0;
}

Answer 2

这应该很好，很好

body { line-height: 0;}

Answer 3

解决方案：将float: left添加到.square班级。

请参阅此小提琴：http://jsfiddle.net/techfoobar/VdJhp/1/

Answer 4

这是你的显示器正在做它。您已将其设置为inline-block。请尝试改为float: left;。这照顾了我。

div之间不需要的垂直间距

4 个答案: