问题
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
回答1:
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;
}
回答2:
This should fix it nice and good
body { line-height: 0;}
回答3:
Solution: Add float: left to your .square class.
Refer this fiddle: http://jsfiddle.net/techfoobar/VdJhp/1/
回答4:
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.
来源：https://stackoverflow.com/questions/9339594/unwanted-vertical-spacing-between-divs