Img changes position of the parent div - html

Question

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.
Here's my code:
HTML:
<div class="module-box">
<div class="module-dummy"></div>
<div class="module-body">
<a href="#post.linkToVideo">
<div class="play-button-div">
<img src=#Umbraco.Media(post.image).Url width="100%" height="100%" />
<span class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
</div>
</a>
</div>
</div>
CSS:
.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;
}

Answer 1

I suppose you mean that the parent DIV becomes a little bit higher / pushes subsequent elements down by adding a little space below the image? In this case, you can add line-height: 0 to the image container (but only if there is no text in it).
On the other hand, if this is the CSS for your containers and images:
.play-button-div {
margin: 0 auto;
display:table;
position:relative;
}
.play-button-div img {
display:block;
margin: 0;
padding: 0;
position:relative;
}
, then you should change display:block; to display:table-cell; in .play-button-div img, and also add vertical-align: top; to it.