title: Is Angular adding margin/padding to my component?
body: <p>I'm facing a little problem.. I'm trying to build some kind of &quot;Matrix&quot; to build a snake game in angular, and for some reason, there is a margin / padding I can not remove. Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- snake.component.html --&gt;
  &lt;div id=&quot;ng-snake-main&quot;&gt;
    &lt;div *ngFor=&quot;let row of matrix&quot; class=&quot;row&quot;&gt;
      &lt;ng-container *ngFor=&quot;let box of row.boxes&gt;
        &lt;snake-box [box]=&quot;box&quot;&gt;&lt;/snake-box&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;!-- box.component.html --&gt;
  &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Both using the same style file:</p>
  <pre><code>// styles.scss
  
  .row {
    margin: 0px;
    padding: 0px;
  }
  
  .box {
    display: inline-block;
    background-color: blue;
  
    width: 30px;
    height: 30px;
  
    border: 1px solid black;
  }
  
  </code></pre>
  <p>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:</p>
  <p>In this screenshot you can check that the &quot;snake-box&quot; component is adding some kind of margin.</p>
  <p><img src="https://i.stack.imgur.com/0jYuZ.png" alt="screenshot1" /></p>
  <p>In this other screenshot you can see that the div actually doesn't have margin/padding.</p>
  <p><img src="https://i.stack.imgur.com/jtt5P.png" alt="screenshot2" /></p>
  <p>Is angular adding margin to my component? If yes, how can I remove it?</p>