javascript网格中的行间距

Question

我使用两个javascript for循环创建了一个网格，因为某种原因，我在网格中的行之间有一个固定的间隔。我不明白是什么引起了这一鸿沟。

这就是我所做的。

var length = 100;

var text = "";
var i;
for (i = 0; i < length; i++) {
 text += '<div>';  
    for(var x = 0; x < length; x++){
        text += '<div class="b"></div>';
    }
 text += '</div>';  
}

https://jsfiddle.net/davseveloff/wL3Ljpxo/

我想是因为电视是空的，虽然它们有宽度和高度.

任何帮助都会很好。

TNX

Answer 1

这是因为元素和<br>标记之间的空格被呈现为文本，如果您将字体大小设置为0，它将消除空白，同时仍会中断行。

(演示)

#demo {
    font-size: 0;
}

Answer 2

添加一个类并将相同的高度应用于外部div。

for (i = 0; i < length; i++) {
   text += '<div class="row">';//  
   for(var x = 0; x < length; x++){
      text += '<div class="b"></div>';
   }
   text += '</div>';
 }

CSS

.row{
   height: 2px;
}

http://jsfiddle.net/afelixj/xrcgfm7g/

请检查一下小提琴。为了清晰起见，我已经将网格大小增加到5 5px，并删除了背景图像。