Angular 是否将 margin/padding 添加到我的组件中？

Question

我遇到了一个小问题..我正在尝试构建某种“矩阵”以在 angular 中构建贪吃蛇游戏，由于某种原因，我有一个边距/填充无法删除。这是我的代码：

<!-- snake.component.html -->
<div id="ng-snake-main">
  <div *ngFor="let row of matrix" class="row">
    <ng-container *ngFor="let box of row.boxes>
      <snake-box [box]="box"></snake-box>
    </ng-container>
  </div>
</div>

<!-- box.component.html -->
<div class="box"></div>

都使用相同的样式文件：

// styles.scss

.row {
  margin: 0px;
  padding: 0px;
}

.box {
  display: inline-block;
  background-color: blue;

  width: 30px;
  height: 30px;

  border: 1px solid black;
}

所以，为什么行与行之间有一个 space？？？我认为这没有意义，但我确定我遗漏了一些东西。我会留下一些截图：

在此屏幕截图中，您可以检查“蛇盒”组件是否添加了某种边距。

在另一个屏幕截图中，您可以看到 div 实际上没有 margin/padding。

angular 是否为我的组件增加了边距？如果是，我该如何删除它？

Answer 1

您问题的答案是 CSS FLEX。它适用于这些样式：

// styles.scss

.row {
  display: flex;
  flex-direction: row;
}

.box {
  background-color: blue;

  width: 30px;
  height: 30px;

  border: 1px solid black;
}

如果你想了解更多关于 flexbox 的信息，这里有一个有趣的 link https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Angular 是否将 margin/padding 添加到我的组件中？

Is Angular adding margin/padding to my component?

html

margin

sass

padding

angular