1px乘1px内联块div，不需要的间距

Question

所以，我生成了成百上千个单独的div，所有这些都是用来设计的：

.box {
  width: 1px;
  height: 1px;
  background-color: #000;
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  letter-spacing: 0;
  font-size: 1px;
}

然而，我遇到了一个我似乎无法解决的奇怪问题。由于有数百个div，它们会换行（我希望发生这种情况），但是在创建新行之前会留下很大的差距。

访问https://jsbin.com/rofihu/1自行查看问题，调整浏览器大小以获取div包装。

如果我将这些div的宽度和高度更改为50x50更大的值，则此问题会消失。

提前致谢。

Answer 1

您必须将line-height: 0px;放入容器中，而不是放在.box

中

如果您没有容器，请使用

body {
  line-height: 0px;
}

https://jsfiddle.net/ahsv5mxb/

Answer 2

将_once添加到您的line-height:1px;元素中。 框内的行高并不重要，但是父项设置文本行之间的距离（将其视为带有跨度的段落;如果缩小跨度文本的大小，则不会影响段落中行之间的距离。）

＆＃13;

＆＃13;

.container

＆＃13;

boxesToCreate = 0;
boxesMarkup = '';
viewportW = window.innerWidth;
viewportH = window.innerHeight;

function createBoxes(num) {
  boxesToCreate = num;
  if (boxesToCreate >= 1) {
    boxesToCreate -= 1;
    boxesMarkup += '<div class="box"></div>';
    createBoxes(boxesToCreate);
  } else {
    $('.container').append(boxesMarkup);
    colourBoxes();
  }
}

function colourBoxes() {
  $('.box').each(function() {
    $(this).css('background-color', '#' + Math.floor(Math.random() * 16777215).toString(16));
  });
}

createBoxes(200);

＆＃13;

.container {
  position: relative;
  line-height: 1px;
}
.box {
  width: 10px;
  height: 10px;
  background-color: #000;
  display: inline-block;
  vertical-align: top;
  line-height: 1px;
  letter-spacing: 0;
  font-size: 1px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用var car = database.find(carId); console.log("car: " + car[0].id); ... 代替float:left;

display:inline-block;

Answer 4

可能是保证金或填充问题？

如果您“检查”该元素，那么“盒子属性”是什么？

或者你可能在div中有一些内容（甚至只有空格），这可能会触发这种行为

Answer 5

.box { 
    width: 5px;
    height: 5px;
    background-color: #000;
    float: left;
    vertical-align: top;
}