I am having a problem with multiple ng-repeat elements when showing div elements as inline-block. There is a strange gap between elements where one ng-repeat ends and the next one starts, as illustrated by the image:
I have created a plunk to demonstrate this behavior:
Why is this happening and how to remove the gap?
Check this plunk
There is a hack to remove space between inline elements that appears at line-break.
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><!--
--><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><!--
--><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
You could read more about other hacks here.
That is because of the way the .number class in your css is defined. If you change it so that it contains a float: left, you'll get rid of the extra gap.
.number {
width: 20px;
height: 20px;
display: inline-block;
color: white;
text-align: center;
float: left;
}
You can see my updated plunkr here
I know it's quite weird, but the whitespaces (crlf, spaces...) between your inline block divs make the space.
If you remove them, the space goes off. (plunker demo)
I couldn't find any reference for explanation but my guess is that since the characters are between inline blocks, it's interpreted as a space as if block elements were actually inline ones (e.g. spans).
<body ng-app="testRepeat">
<div class="red" ng-controller="TestCtrl">
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
</div>
</body>
This is caused by the whitespace between the <div> elements. There are various ways to address this like the other answers have suggested. My preferred layout is:
<div class="blue number" ng-repeat="number in array1 track by $index">{{number}}</div
><div class="green number" ng-repeat="number in array2 track by $index">{{number}}</div
><div class="teal number" ng-repeat="number in array3 track by $index">{{number}}</div>
But the other suggestions are valid.
Another way to handle this without worrying about the HTML is to set the font size of the container to 0 so that the white space doesn't appear.
http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview
The downside to this approach is that you can't use percentage sizes for the contained element fonts and you have to set them explicitly.
