Where does the space between the bottom of the picture and the border come from

Question

I have this simple image tag which is wrapped by a div. I just don't understand why the div grows larger in height than the image.

html

<div class="cc-thumbnail-bar-item">
        <img src="http://www.sir-chesterfield.de/media/catalog/product/0/1/01.01.a_4_4.jpg" class="cc-thumbnail-bar-item-image" />
</div>

css

.cc-thumbnail-bar-item {
    border: 1px solid #918e7d;
}

.cc-thumbnail-bar-item-image {
    width: 48px;
}

http://jsfiddle.net/cburgdorf/YW8Ka/

possible duplicate of [Why an image inside a div has an extra space below the image?](http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image) — Quentin, Mar 19 '13 at 11:45
Ah, that explanation makes sense. Crazy I didn't encounter that earlier. — Christoph, Mar 19 '13 at 11:48

score 1 · Accepted Answer · answered Mar 19 '13 at 11:45

1

That is because an image is rendered inline, like a letter. you can see the space at the bottom of the every text.

It can be fixed either by adding line-height and vertical- align

Add line-height:0

.cc-thumbnail-bar-item {
     border: 1px solid #918e7d; line-height:0
}

DEMO

Add vertical-align

.cc-thumbnail-bar-item-image {
    width: 48px; vertical-align:top
}

DEMO 2

answered Mar 19 '13 at 11:45

Sowmya

26,684
21
96
136

That doesn't explain *why*, which is what the question is asking. – Quentin Mar 19 '13 at 11:45

Where does the space between the bottom of the picture and the border come from

1 Answers1