30

我有一个 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;
}
4

3 回答 3

68

使用以下 css：working jsFiddle

img{display:block;}

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

于 2013-07-21T10:15:26.113 回答
3

在这里回答。采用

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

小提琴

于 2016-01-19T10:04:49.313 回答
0

使用display: inline-block;你的形象

演示

于 2013-07-21T10:18:13.980 回答