为什么div中这张图片下面有一个白色边框？答案

【问题标题】：Why is there a white border under this image in the div?为什么div中这张图片下面有一个白色边框？
【发布时间】：2016-05-29 18:47:59
【问题描述】：

我不知道为什么，但我的 div 中的图像下方有一个白色边框或空格。我正在尝试制作一个图像完全适合的盒子，但是它下面的这个空白使它看起来非常糟糕。如何禁用它？

HTML

<div class="content-img">
    <img src="">
</div>

<div class="content-box">
    <p>HELLO WORLD</p>
</div>

CSS

.content-box {
    background: white;
    border-radius: 3px;
    max-width: 70%;
    height: 300px;
    margin: 1em 0;
    padding: 1em;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img {
    background: white;
    border-radius: 3px;
    width: 70%;
    margin: 1em 0;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img img {
    zoom: 2;  //increase if very small images
    display: block;
    margin: auto;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

小提琴链接： https://jsfiddle.net/elliotsoomro/o68rhr1L/

【问题讨论】：

标签： html css image border

【解决方案1】：

这是为下行文本元素（例如 j、y、p、q、g）保留的间隙。您可以通过将vertical-align:top; 添加到您的图像元素来摆脱它。

jsFiddle example

【讨论】：

仅供参考，您在小提琴中拼错了vertical-align。
当我在您回答后立即点击小提琴链接时，由于某种原因它指向了第 7 版。现在一切都很好:)
@Yass - 是的，我想我也抓住了它并修复了它。很好的收获。