Clever Geek Handbook

Break between lines in javascript grid

i made a grid using two javascript for loops, for some reason i have a fixed gap between the lines in the grid. I cannot understand that we have a gap.

here's what i did.

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/

I guess the reason is that the divs are empty even though they have width and height att ...

any help would be great.

TNX

+3


source to share


2 answers


This is because the space between elements and tags is <br>

rendered as text, if you set the font size 0

, it will remove the gap by continuing to break the line.

( Demo )



#demo {
    font-size: 0;
}
+4


source


Add a class and apply the same height to the outer 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/

Please check the script. I increased the grid size to 5px and removed the background image for clarity.

+1


source






More articles:


All Articles