3 divs in the middle of the page have a verticle offset - html

Question

Thank you all for your replies. As it turns out it had to do with the original image sizes. I am new to StackOverflow so now I know to use filler images. Thanks Again!
I have been designing a website and I have run into a strange error that I can't figure out. I have 3 <div> elements in side <a> centered using text-align center. The <div> and/or the <a> element seem to have a vertical offset from the next one. I hope there's a solution,
.iconCardCont {
text-align: center;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/98x105">
<h2>Info</h2>
</div>
</a>
</section>

Answer 1

As you can see if you run that snippet all the items line up, unlike in your screenshot, this happens even with actual images that aren't broken (in future try use https://placeholder.com/ for questions on here) so I think there must be something else in your code that is causing an issue.
One thing to note is that in your css .iconCard a doesn't refer to anything as your <a> tag is the tag with that class so it's looking for other <a> tags within that.
I think what you might be looking for is vertical-align but you'll need to set this for your container, rather than the items you are trying to align within it.
.iconCardCont {
text-align: center;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="http://via.placeholder.com/150x100">
<h2>Info</h2>
</div>
</a>
</section>

Answer 2

i think you mean the space you marked with some dashes right ?
one way is to set the parent font size to zero and give the child a font size.
.iconCardCont {
text-align: center;
font-size: 0;
}
.iconCard div {
background-color: #86b55bff;
width: 160px;
height: 200px;
display: inline-block;
text-align: center;
margin-left: 20px;
margin-right: 20px;
font-size: 20px;
}
.iconCard img {
margin-top: 20px;
}
.iconCard h2 {
background-color: white;
width: 140px;
margin-left: auto;
margin-right: auto;
color: #86b55bff;
}
.iconCard a {
vertical-align: bottom;
overflow: hidden;
}
<section class="iconCardCont">
<a href="" class="iconCard">
<div><img src="CalendarIcon.png">
<h2>Calendar</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="SignupIcon.png">
<h2>Signup</h2>
</div>
</a>
<a href="" class="iconCard">
<div><img src="InfoIcon.png">
<h2>Info</h2>
</div>
</a>
</section>