Is Angular adding margin/padding to my component? - html

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/