div之间不必要的垂直间距 [英] Unwanted vertical spacing between divs
本文介绍了div之间不必要的垂直间距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过将div附加到body并让它们环绕屏幕来布局网格.为什么我在行之间得到间距?它保持不考虑边际&填充;参见下图.
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.
这是标记:
<!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
推荐答案
由于它是inline-block，因此被视为一行文本，因此在每行之间留出一些空间.您可以更改容器的line-height或font-size进行修复(或为了安全起见，将两者都修复):
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;
}
这篇关于div之间不必要的垂直间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
