title: Img changes position of the parent div
body: <p>I'm working on the main page of my website and want to display different kinds of square shape modules. Everything works fine until I use images on the modules. Whenever I add an img, the parent div changes position a few pixels down. </p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="module-box"&gt;
    &lt;div class="module-dummy"&gt;&lt;/div&gt;
    &lt;div class="module-body"&gt;
      &lt;a href="@post.linkToVideo"&gt;
        &lt;div class="play-button-div"&gt;
          &lt;img src=@Umbraco.Media(post.image).Url width="100%" height="100%" /&gt;
          &lt;span class="play-button-icon"&gt;&lt;i class="fa fa-play" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.module-box {
      display: inline-block;
      position: relative;
      width: 100%;
  }
  
  .module-dummy {
      margin-top: 100%;
  }
  
  .module-body {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  
  .play-button-div {
      margin: 0 auto;
      display:table;
      position:relative;
  }
  
  .play-button-div img {
      display:block;
      margin: 0;
      padding: 0;
      position:relative;
  }
  
  .play-button-div i{
      width: 100px;
      height: 100px;
      color: #0080ff;
      background-color: #fff;
      border-radius: 50px;
        border: 3px solid #0080ff;
      font-size: 70px;
     text-align: center;
      line-height:100px;
      text-indent:15px;
      opacity: .8;
  
  }
  .play-button-icon {
  
      width: 100px;
      height: 100px;
     position:absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
  }
  
  .play-button-div:hover img {
    opacity: .6;
  }
  
  .play-button-div:hover i {
      background-color: #0080ff;
      color: #fff;
      border: 3px solid #FFF;
  }
  </code></pre>