javascript网格中行与行之间的间隙

gap between lines in javascript grid

本文关键字：间隙 之间 javascript 网格      更新时间：2023-09-26

我用两个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是空的，尽管它们有宽度和高度…

请帮忙就太好了。

TNX

这是因为元素和<br>标签之间的空格被呈现为文本，如果你将字体大小设置为0，它将删除间隙，同时仍然断行。

(演示)

#demo {
    font-size: 0;
}

添加一个类，并对外部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/

请检查小提琴。我已经增加了网格大小为5px，并删除了背景图像的清晰度。

相关文章：