Box shadow causing detrimental effect to image - css

Question

To start off here is an image to illustrate what I'm dealing with:
I have seen a few other instances of people dealing with this where a border of sorts is applied to the bottom of an image. A solution was to set the images to display: block, but there was no explanation as to why this fixes it. I'm trying to understand why an image must have a display value of block when applying a box shadow property.
HTML
<div id="showcase">
<section>
<ul id="gallery">
<li><img src="img/img1.png" alt="One"></li>
<li><img src="img/img2.png" alt="Two"></li>
<li><img src="img/img3.png" alt="Three"></li>
<li><img src="img/img4.png" alt="Four"></li>
<li><img src="img/img5.png" alt="Five"></li>
<li><img src="img/img6.png" alt="Six"></li>
<li><img src="img/img7.png" alt="Seven"></li>
</ul>
</section>
<footer>
</footer>
</div>
CSS
#showcase {
max-width: 850px;
border: 2px dotted;
margin: 0 auto;
background: silver;
}
#gallery {
list-style: none;
padding: 0;
margin: 0;
}
#gallery li {
width: 45%;
float: left;
margin: 2.5%;
box-shadow: 0 8px 10px -5px;
}

Answer 1

Actually you're just missing to properly position your inline-block images using
#gallery img{
vertical-align: top; /* or any other value from */
}
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
Example with issue:
#gallery li{
display:inline-block;
box-shadow: 0 8px 10px -5px;
}
<ul id="gallery">
<li>
<img src="//placehold.it/60x60">
</li>
</ul>
Example with vertical-align on images
#gallery li{
display:inline-block;
box-shadow: 0 8px 10px -5px;
}
#gallery li img{
vertical-align: top;
}
<ul id="gallery">
<li>
<img src="//placehold.it/60x60">
</li>
</ul>
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
Phrasing HTML elements like img are subject to typographical line-boxes unless set (overridden) to a block-level display state.