0

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.

screenshot1

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

screenshot2

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

The Fabio
  • 5,369
  • 1
  • 25
  • 55
Danilo Bassi
  • 119
  • 1
  • 1
  • 9

1 Answers1

0

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/

KSoze
  • 141
  • 3
  • Hi, I tried with flexbox and it was the same, the solution was to add a `vertical-align: top;` in the `.box` class! – Danilo Bassi Feb 06 '22 at 22:59
  • Are you using bootstrap in your application ? If yes, it would be better not to use the same classes. – KSoze Feb 18 '22 at 20:45