html - how to remove the default spacing to the upper elements (big amount of div's) -

i create lot of div's (~200) using jquery following way:

wrapper.append('<div class="clicker"></div>'); 

the clicker class looks this

#wrapper .clicker{     width: 3px;     height: 3px;     display: inline-block;     vertical-align: top;     border: 1px solid rgba(0,0,0,0.3);     margin: 0;     padding: 0; } 

the js part working, elements not aligned expected. spacing come from? how remove it?

it looks this: (the small boxes black border)

fiddle example: https://jsfiddle.net/xphvlrm9/

add float: left; .clicker

.clicker{     width: 3px;     height: 3px;     display: inline-block;     vertical-align: top;     border: 1px solid rgba(0,0,0,0.3);     margin: 0;     padding: 0;     float: left; } 

http://jsfiddle.net/qcrefr4d/