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/

我假设是什么原因导致 div 为空，尽管它们具有宽度和高度 att...

任何帮助都会很棒。

TNX

Answer 1

这是因为元素和 <br> 标签之间的 space 被呈现为文本，如果您将字体大小设置为 0 它将消除间隙，同时仍然中断这条线。

(Demo)

#demo {
    font-size: 0;
}

Answer 2

添加一个 class 并将相同的高度应用于外部 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/

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

javascript 网格中的线间距

gap between lines in javascript grid

javascript

css

grid

for-loop