Вертикальные выравнивания из IMG мешая на высоту сНа

Question

У меня есть образ 24x24 пикса внутри <a>, который вложен в <div>, имеющий min-height:50px.

Нижняя и верхняя прокладки <a> Элемент 13px оба.

Таким образом, высота должна быть 24px (высота изображения) + 13px (<a> обивка-топ) + 13px (<a> обивка дна) = 50px правильно?

Проблема заключается в том, что обертка <div> расширяет свою высоту до 54 пикселей, за исключением случаев, когда я определяю vertical-align:middle для этого изображения, а затем он изменил размер до 50 пикселей по желанию.

Вот код http://codepen.io/thyagosic/pen/JKYrjN

Удаление vertical-align: middle; может помочь понять проблему

Answer 1

Все изображения являются inl ine по умолчанию, и они имеют 4px-пространство внизу. Вы должны установить для них «вертикальное выравнивание: верх» или «display: block», чтобы удалить это пространство.

Answer 2

Я рекомендую поместить изображения внутри ссылок на дивы (или установка display: block к элементу)

<div class="menu"> 
    <a href="#"> 
    <div id="image"> 
     <img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" /> 
    </div> 
    </a> 
</div> 

Также должны быть установлены отступы/поля для элементов «block»