javascript - Unintended spaces in Knockout foreach -

with knockout, had foreach display list of colors in scale.

however trying resovle spacing issue, found sort of knockout being problem.

basic setting background color each item in array. , since love have nicly indented source code, html looks this:

<div class="color-scale" data-bind="foreach: colors">     <div class="color-scale-item horizontal" data-bind="style: {backgroundcolor: $data}"></div> </div> 

jsfiddle

there css style inline-block, not putting in space.

scale looks nice, add 90+ colors, space not needed. how remove?

the space due return line , spacing in computed html each div.

i have tried chaning spans, same result.

so there way write knockout 'nicely' written source, not produce unneeded spaces, without writing on single line?

<div class="color-scale" data-bind="foreach: colors"><div class="color-scale-item horizontal" data-bind="style: {backgroundcolor: $data}"></div></div> 

jsfiddle single line

this has nothing knockout js. issue display: inline-block. should going:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

in case use table layout:

.color-scale {     display: table; }  .color-scale span { /* these spans still left 1px spaces. */     display:none; }  .color-scale-item {     width: 2px;     height: 20px;     display:table-cell; } 

fiddle: http://jsfiddle.net/uqvb2fou/3/

update:

considering use case here might away just:

.color-scale {     font-size: 0; }