javascript网格中的行之间的间隙答案

【问题标题】：gap between lines in javascript gridjavascript网格中的行之间的间隙
【发布时间】：2015-08-05 20:56:58
【问题描述】：

我使用两个 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元素的高度。

标签： javascript css for-loop grid

【解决方案1】：

添加一个类并将相同的高度应用于外部 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 并删除了背景图像。

【讨论】：

【解决方案2】：

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

(Demo)

#demo {
    font-size: 0;
}

【讨论】：