IMG 在 div 的底部有 5px 的额外填充答案

【问题标题】：IMG has 5px extra padding at bottom of divIMG 在 div 的底部有 5px 的额外填充
【发布时间】：2013-07-20 05:21:21
【问题描述】：

我有一个 div 有一个神秘的 5px 底部填充添加到其中包含的图像。我尝试为所有元素重置 CSS 填充和边距，但无济于事。我错过了什么？：

JSFIDDLE：http://jsfiddle.net/vbFx9/

HTML：

<div id="list">
    <div id="boxscroll">
        <div class="list-result">
            <img src="images/ps-result.png">
        </div>
        <div class="list-result">
            <img src="images/ps-result.png">
        </div>
        <div class="list-result">
            <img src="images/ps-result.png">
        </div>
    </div>
</div>

CSS：

.list-result {
    padding:0;
    margin:0;
    width:100%;
    border-bottom: 1px #000 solid;
    background:#f9f9f9;
}
.list-result:hover {
    background:#e9e9e9;
}
#list {
    top: 100px;
    bottom:40px;
    right: 20px;
    position: absolute;
    width: 20%;
    max-width:300px;
}
#boxscroll {
    font-family:'Open Sans';
    background:#f9f9f9;
    overflow: auto;
    max-height:100%;
    border: 8px solid #fff;
}

【问题讨论】：

请接受下面的答案，因为它绝对是正确的、有效的解决方案。

标签： css

【解决方案1】：

使用以下 CSS：working jsFiddle

img{display:block;}

默认情况下，图像是内联显示的 - 这会导致图像下方的填充。（因为行高）

【讨论】：

这对我有用，谢谢。我是否正确理解这一点：任何内联内容都需要在其底部留出一些空间，以便该空间可以被“g”、“y”等字母的下部使用。这是导致问题的原因吗？或者是单独的行之间的空间是什么原因造成的？
@StefanMonov 实际上这两件事是相互连接的，行高受字体大小的影响（如您所说，为下部字母留出空隙）。这个问题也可以通过将font-size 设置为0（因此不需要额外的高度）或强制line-height 为0（这当然会创建一个垂直滚动条）来解决。此外，内联元素之后的任何空格都将被视为 HTML 中的 ' '（空格）。所有这些结合起来，解释了为什么在这种情况下将图像视为块最有意义。

【解决方案2】：

回复here。使用

.list-result {    
  line-height: 0;
}

Fiddle

【讨论】：

【解决方案3】：

在您的图片中使用display: inline-block;

demo

【讨论】：