Question

我不确定为什么我的盒子上方和下方有额外的空间，我将其添加到一个简单的for循环中。

HTML：

<body>
  <div id="header">
    Snake
  </div>
  <div id="game-container"></div>
</body>

CSS :(我尝试过很多次）

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  border: 0;
  padding: 0;
  margin: 0;
}
#header {
  text-align: center;
  font-size: 5em;
  color: rgb(0, 50, 105);
}

#game-container {
  width: 280px;
  padding: 0;
  margin: 0 auto;
}
.one-square {
  width: 14px;
  height: 14px;
  border: 1px solid grey;
  display: inline-block;
  margin: 0;
  padding: 0;
}

JQUERY：

$(document).ready(function(){
    var div = '<div class="one-square"></div>';

    for(var i = 0; i < 300; i++){
      $('#game-container').append(div);
    }
});

显然我错过了一些明显的东西。快速编写代码来演示：http://codepen.io/anon/pen/WrperX

Answer 1

只需将line-height:0px;添加到#game-conatiner div。

#game-container {
  width: 280px;
  padding: 0;
  margin: 0 auto;
  line-height:0px; /* ADDED */
}

Working Fiddle

说明：默认情况下，您的div有一些line-height，其高度超过one-square div的高度，因此它的上方和下方都有空格。添加line-height:0px会删除它。

Answer 2

更改

.one-square {
  display: inline-block;
}

致：

.one-square {
  display: block;
  float: left;
}

请参阅this updated code-pen

Answer 3

为line-height: 0em;添加#game-container。

#game-container {
  width: 280px;
  padding: 0px;
  margin: 0px auto;
  line-height: 0em;
}

希望这能解决您的问题。

jQuery在for循环中追加300个div有额外的上下边距

3 个答案: