css - Weird style behavior when (not) using ng-repeat -

i need display checkbox list bootstrap modal. using angular ng-repeat display various checkboxes , working fine:

<label class="checkbox-inline" ng-repeat="l in ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']">     <input type="checkbox" value="{{ l }}" /> {{ l }} </label> 

then thing changed manually creating checkboxes:

<label class="checkbox-inline">     <input type="checkbox" value="a" /> </label> <label class="checkbox-inline">     <input type="checkbox" value="b" /> b </label> .... 

and there little space after letters break style.

that may stupid thing don't see change in style comes from! has idea why there space when not using ng-repeat ?

here fiddle https://jsfiddle.net/4hkw8h43/ first button open modal without ng-repeat , second ng-repeat...

as have found out, white-space issue occurs when using display: inline-block; align stuff horizontally. cannot tell why happens in case, how fix it. fix useful in future.

to fix it, implement following:

.whitespace-eliminator {     font-size: 0; } .whitespace-eliminator label {     font-size: 14px; } 

https://jsfiddle.net/4hkw8h43/2/

so basically, setting font-size: 0; on parent makes white-space vanish visually. afterwards have reset font-size of child elements still have font-size: inherit; internally otherwise.