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

Question

问题是:简单指令和 ngRepeat 中的相同指令之间有很大的空间(在 display: inline-block 和 chrome 浏览器的情况下)

Here the plunker

1. 我可以添加无限制的指令，一切都会好起来的:

<tile></tile>
<tile></tile>
<tile></tile>
<tile></tile>

1. 但是如果我写类似 ngRepeat 的东西，布局就会被破坏:

<tile></tile>
<tile></tile>
<tile></tile>
<!-- Here will be too big space-->
<tile ng-repeat="t in [0, 1, 2, 3]"></tile>

这里指令的代码:

 .directive('tile', function () {
        return {
            restrict: 'E',
            scope: {},
            replace: true,
            template: '<div class="tile"></div>',
            controller: function ($scope) {},
            link: function (scope) {}
        };
    })

指令 css 类 .tile:

.tile {
  background-color: red;
  height: 70px;
  width: 70px;
  margin: 4px 2px;
  display: inline-block;
}

那么，为什么会这样呢？原因是什么，我该如何应对？

Answer 1

删除标签之间的空格。 Display inline-block 考虑元素之间的空格。