Javascript div之间不需要的垂直间距_Javascript_Jquery_Layout_Html_Space

Javascript div之间不需要的垂直间距

javascript jquery layout html

Javascript div之间不需要的垂直间距,javascript,jquery,layout,html,space,Javascript,Jquery,Layout,Html,Space,我想通过将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

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


.广场{
显示：内联块；
宽度：80px；
高度：80px；
边框：黑色细实心；
}
$（函数（）{
对于（var i=0；i这应该很好地解决它
body { line-height: 0;}

这应该很好地解决它
body { line-height: 0;}

解决方案：将float:left
添加到.square
类中
参考此提琴：
解决方案：将浮点：左
添加到.square
类中
参考这把小提琴：
是你的显示器在做这件事。你把它设置为内联块
。试着做浮动：左；
。这帮我搞定了。
是你的显示器在做这件事。你把它设置为内联块
。试着做浮动：左；
。这帮我搞定了.
因为它是内联块，所以它被视为一行文本，因此在每行之间都有一些空间。为了安全起见，您可以更改容器的行高或字体大小来修复它（或两者）：
因为它是内联块
，所以它被视为一行文本，因此每行之间都有一些空间。为了安全起见，您可以更改容器的行高
或字体大小
：
检查更新的小提琴：检查更新的小提琴：