Is Angular adding margin/padding to my component?

Question

I'm facing a little problem.. I'm trying to build some kind of "Matrix" to build a snake game in angular, and for some reason, there is a margin / padding I can not remove. Here is my code:

<!-- 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>

Both using the same style file:

// styles.scss

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

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

  width: 30px;
  height: 30px;

  border: 1px solid black;
}

so, why is there a space between rows??? I think that it doesn't make sense, but I'm sure I'm missing something. I'll left some screenshots:

In this screenshot you can check that the "snake-box" component is adding some kind of margin.

In this other screenshot you can see that the div actually doesn't have margin/padding.

Is angular adding margin to my component? If yes, how can I remove it?

Answer 1

The answer to you problem is CSS FLEX. It would work with these styles:

// styles.scss

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

.box {
  background-color: blue;

  width: 30px;
  height: 30px;

  border: 1px solid black;
}

If you want more information about flexbox, here is an interesting link https://css-tricks.com/snippets/css/a-guide-to-flexbox/