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:
将div元素显示为内联块时，我遇到了多个ng-repeat元素的问题。元素之间存在一个奇怪的差距，其中一个ng-repeat结束并且下一个ng-repeat开始，如图所示：
I have created a plunk to demonstrate this behavior:
我创建了一个plunk来演示这种行为：
Why is this happening and how to remove the gap?
为什么会发生这种情况以及如何消除这种差距？
4 个解决方案
#1
17
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.
你可以在这里阅读更多关于其他黑客的信息。
#2
4
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.
这是因为定义了css中的.number类的方式。如果你改变它以便它包含一个浮动：左，你将摆脱额外的差距。
.number {
width: 20px;
height: 20px;
display: inline-block;
color: white;
text-align: center;
float: left;
}
You can see my updated plunkr here
你可以在这里看到我更新的plunkr
#3
4
I know it's quite weird, but the whitespaces (crlf, spaces...) between your inline block divs make the space.
我知道这很奇怪，但你的内联块div之间的空格（crlf，space ...）构成了空间。
If you remove them, the space goes off. (plunker demo)
如果你删除它们，空间就会消失。 （plunker演示）
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>
#4
2
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.
处理此问题而不用担心HTML的另一种方法是将容器的字体大小设置为0，以便不显示空格。
http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview
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.
这种方法的缺点是您不能对包含的元素字体使用百分比大小，您必须明确设置它们。
#1
17
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.
你可以在这里阅读更多关于其他黑客的信息。
#2
4
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.
这是因为定义了css中的.number类的方式。如果你改变它以便它包含一个浮动：左，你将摆脱额外的差距。
.number {
width: 20px;
height: 20px;
display: inline-block;
color: white;
text-align: center;
float: left;
}
You can see my updated plunkr here
你可以在这里看到我更新的plunkr
#3
4
I know it's quite weird, but the whitespaces (crlf, spaces...) between your inline block divs make the space.
我知道这很奇怪，但你的内联块div之间的空格（crlf，space ...）构成了空间。
If you remove them, the space goes off. (plunker demo)
如果你删除它们，空间就会消失。 （plunker演示）
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>
#4
2
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.
处理此问题而不用担心HTML的另一种方法是将容器的字体大小设置为0，以便不显示空格。
http://plnkr.co/edit/wXKl61lyiqdONbChYI9o?p=preview
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.
这种方法的缺点是您不能对包含的元素字体使用百分比大小，您必须明确设置它们。