title: CSS Grids, margin at the bottom when inserting an image
body: <p>I'm giving a go at css grids and I'm stuck on a (probably stupid and basic) problem.
  So I'm trying to basically inserting an image in on of the divs inside the grid and it creates some sort of padding on the bottom. </p>
  
  <p><a href="https://i.stack.imgur.com/nsHbP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nsHbP.png" alt="example"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  #square1 {
    background-color: red;
  }
  
  #square2 {
    background-color: blue;
  }
  
  #square3 {
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
    &lt;div id="test"&gt;
      &lt;div id="square1"&gt;&lt;img src="https://wepushbuttons.com.au/wp-content/uploads/2012/03/twitter-logo-small.jpg"&gt;&lt;/div&gt;
  
      &lt;div id="square2"&gt;&lt;/div&gt;
  
      &lt;div id="square3"&gt;&lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>