Javascript ngRepeat中简单指令和相同指令之间的空间不同

问题是： ngRepeat中的简单指令和相同指令之间有很大的空间（在

显示：inline block

和chrome浏览器的情况下）

我可以添加无限指令，一切都会好起来：

但如果我写了类似于

ngRepeat

，布局就会被破坏：

以下是指令代码：

指令（'tile'，函数（）{ 返回{ 限制：'E'， 作用域：{}， 替换：正确， 模板：“”， 控制器：函数（$scope）{}， 链接：函数（作用域）{} }; }) 指令css类

.tile

：

---

那么，为什么会发生这种情况呢？原因是什么？我该如何解决这个问题？

删除标记之间的空白。显示内联块考虑元素之间的空格。

您可以添加

float:left

；要查看您的css，请参阅下面的演示

angular.module（'app'，[]）
.directive（'tile'，function（）{
返回{
限制：'E'，
作用域：{}，
替换：正确，
模板：“”，
控制器：功能（$scope）{
},
链接：功能（范围）{
}
};
});
.tile{
背景色：红色；
高度：70像素；
宽度：70px；
利润：4倍2倍；
显示：内联块；
浮动：左；
}
删除标记之间的空白。显示内联块考虑元素之间的空白。
.tile {
  background-color: red;
  height: 70px;
  width: 70px;
  margin: 4px 2px;
  display: inline-block;
}