Grid system using inline-block column and remove html white space with javascript

Question

I have written a like-bootstrap CSS grids system, but i used inline-block instead left-floated block. Of course, I need a trick to remove white space between inline-block columns. And I also wrote a small pure-javascript to do that:

bodyzzz = document.getElementsByTagName("BODY")[0];
bodyzzz.innerHTML = body.innerHTML.replace(/>\s*\n*\r*\</g, '><');

I know some other trick can remove white space, but they still have bugs (or weak points). So, for anyone expert in front-end dev, what's my trick's weak points? Do you guys think this solution is the best?

Answer 1

I am assuming the space is due to that newline character when placing one div below the other

here is a way to get rid of the spaces

snippet

 div { display:inline-block; border:solid; width:100px; height:100px; margin:none; padding:0; } 

 <div> Content1 </div><div> Content2 </div><div> Content3 </div> 

Notice how the the starting div tags are on the same line as that of their preceeding div tag endings

Edit: A much nicer is by setting css display to display:table-cell;

here is another snippet

 div { display:table-cell; border:solid; width:100px; height:100px; margin:none; padding:0; } 

 <div> Content1 </div> <div> Content2 </div> <div> Content3 </div>