IMG has 5px extra padding at bottom of div

Question

I have a div that has a mystery 5px bottom padding added to an image contained within it. I've tried resetting CSS padding and margin for all elements but to no avail. What am I missing?:

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;
}

please accept the answer below as it most definitely appears to be the correct, working solution. — Yes Barry, Apr 23 '14 at 22:39

score 73 · Accepted Answer · answered Jul 21 '13 at 10:15

73

use the following css: working jsFiddle

img{display:block;}

Images are by default displayed inline - which causes the padding below the image. (because of line-height)

answered Jul 21 '13 at 10:15

Yotam Omer

15,310
11
62
65

2

This worked for me, thanks. Am I understanding this correctly: any inline content needs to leave some space at its bottom so this space can be used by the lower parts of letters like 'g', 'y' etc. Is that what causes the problem? Or is the space between separate lines what causes it? – Stefan Monov Jul 17 '14 at 13:02
1

@StefanMonov actually the two things are attached to one another, the line height is affected by the font size (leaving a gap for lower parts letters as you said). This issue could also be solved by setting the `font-size` to 0 (thus no additional height is needed) or forcing the `line-height` to be 0 (this will ofcourse create a vertical scroll bar). Also, any whitespace after an inline element will be considered as ' ' (space) in HTML.. All these combined, explain why treating the images as blocks makes most sense in this case. – Yotam Omer Aug 21 '14 at 09:42

score 4 · Answer 2 · edited May 23 '17 at 12:24

4

Answered here. Use

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

Fiddle

edited May 23 '17 at 12:24

Community

1
1

answered Jan 19 '16 at 10:04

user764754

3,865
2
39
55

score 0 · Answer 3 · answered Jul 21 '13 at 10:18

0

use display: inline-block; to your image

demo

answered Jul 21 '13 at 10:18

Bhojendra Rauniyar

83,432
35
168
231

IMG has 5px extra padding at bottom of div

3 Answers3