div之间不需要的垂直间距[重复]答案

【问题标题】：Unwanted vertical spacing between divs [duplicate]div之间不需要的垂直间距[重复]
【发布时间】：2012-03-09 12:32:17
【问题描述】：

我想通过将 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

【问题讨论】：

标签： javascript jquery layout html space

【解决方案1】：

因为它是inline-block，所以它被视为一行文本，因此每行之间都有一些空格。您可以更改容器的line-height 或font-size 来修复它（或两者兼而有之，为了安全起见）：

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

【讨论】：

【解决方案2】：

这应该可以很好地解决它

body { line-height: 0;}

【讨论】：

【解决方案3】：

解决方案：将float: left 添加到您的.square 类中。

参考这个小提琴：http://jsfiddle.net/techfoobar/VdJhp/1/

【讨论】：

检查更新的小提琴：jsfiddle.net/techfoobar/VdJhp/1

【解决方案4】：

是您的显示器在做这件事。您已将其设置为 inline-block。尝试改用float: left;。这为我解决了问题。

【讨论】：