Html 图像滑块有不需要的间隙

我有一个图像滑块，在滑块的正下方有几个像素高的地方有一个不需要的间隙。我想给它添加一个框阴影，但正如你在JSFIDLE中看到的，由于间隙，它看起来很可怕，我用红色边框高亮显示滑块，以便你可以看到间隙，这是什么原因？能修好吗

#slider {
    width:40%;
    float:left;
    border: 2px solid red;
    box-shadow: 0px 0px 4px 4px #000;
}

jsiddle:

默认情况下，图像是内联元素。它们周围添加了空白，以便在它们和其他元素之间提供缓冲

只需在CSS中添加以下内容：

#slider img {
    display: block;
}

---

这个问题经常出现，解决方法是将display:block添加到slider img中，例如。@NickR这很有效，谢谢。我怎么能代表你这么做，我看不出有什么选择？