Где находится пространство между нижней частью изображения и границей от

Question

У меня есть этот простой тег изображения, который обернут div. Я просто не понимаю, почему div растет больше по высоте, чем изображение.

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/

Answer 1

Это происходит потому, что изображение визуализируется рядный, как письмо. вы можете увидеть пространство внизу каждого текста.

Это может быть исправлено либо путем добавления line-height и vertical- align

Добавить line-height:0

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

DEMO

Добавить vertical-align

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

DEMO 2