глюк с размером A и вложенным IMG

[PeeX]

Здравствуйте!

у меня следующая проблема.

в html документе есть елемент A (ссылка) в ней картинка. Так вот "размеры" ссылки меньше "размеров" картинки, а точнее высота.

.main-toolbar {
	background-color : #c0c0c0 ;
	margin-bottom : 2px ;
}

.tool-btn {
	cursor : pointer ;
}
.tool-btn:hover {
	background-color : #8080ff ;
	outline : 1px solid #404080 ;
}

.tool-btn-img {
	margin : 0px ;
	padding : 0px ;
	width : 21px ;
	height : 21px ;
	border : none ;
}

<div class="main-toolbar">
	<a class="tool-btn"><img src="line.png" class="tool-btn-img" width=21 height=21></a>
	<a class="tool-btn"><img src="line.png" class="tool-btn-img"></a>
</div>

сама картинка 21х21 png

А вот что получилось

Сверху-слева и справа это результат в firebug

снизу-слева как на экране (firefox windows / linux, google chrome), зеленым выделена область изображения, голубым область "ссылки" с бакгроундом

п.н. смотрел раздел ЧаВО, пробовал оттуда кое что - не помогло.

п.п.н. 4 года назад славливал такой "глюк" в другом тестовом проекте, никак не поборол ибо было не важно. А щас важно побороть.

Может это у меня от непонимая чего то, хотелось бы помощи разобрать как лечить и как больше не натыкаться

[USF]

все логично. <a> инлайн элемент на его высоту влияет только шрифт и line-height.

http://jsfiddle.net/B8NdY/

Edited October 11, 2012 by USF

[PeeX]

все логично. <a> инлайн элемент на его высоту влияет только шрифт и line-height.

http://jsfiddle.net/B8NdY/

странно что с таким поведением я раньше сталкивался лишь однажды. В остальных случаях (а их не мало) такого поведения не наблюдалось, все было четко. Но так или иначе спасибо за помощь. С вашей подсказки сгенерировал для себя решение. Сделал так:

.tool-btn {
	cursor : pointer ;
	width : 21px ;
	height : 21px ;
	overflow : hidden ;
	display : inline-block ;
}
.tool-btn-img {
	margin : 0px ;
	padding : 0px ;
	border : none ;
}

[USF]

я правда не пойму, чем стандартный поток с инлайном не подошел? можно было поиграться с vertical-align

[PeeX]

я правда не пойму, чем стандартный поток с инлайном не подошел? можно было поиграться с vertical-align

я как раз поигрался, высота картинки по прежнему 21 пикс, а высота ссылки все те же 18 пикс. Получилось что все равно фон ссылки "не покрывкет всю площадь картинки"

если есть еще варианты я их все попробую