znacznik zajmujący dodatkowe miejsce w html

Question

Umieszczam obraz wewnątrz znacznika. ale kiedy podałem granicę do obrazu i tagu. Znacznik A zabiera trochę dodatkowej przestrzeni. nie otacza obrazu. Jak pokonać tę dodatkową przestrzeń za pomocą znacznika "a". Wskazuję znaczek na czerwonej linii.

Moje html:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

CSS:

img 
{ 
    border:1px solid black; 
} 
a 
{ 
    border:1px solid red; 
} 

http://jsfiddle.net/rEPXY/2/

Answer 1

Czy coś takiego, czego szukasz?

a 
{ 
    border:1px solid red; display:inline-block; line-height:0; 
} 

Answer 2

zależności od tego jak ten obraz zostanie umieszczony na ciebie stronie, można rozwiązać ten problem przez unoszące się <a> i <img> tagi. Zobacz poprawioną jsfiddle na przykład:

HTML:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a> 

CSS:

img { 
    border:1px solid black; 
    float: left; 
} 

a { 
    border:1px solid red; 
    float: left; 
} 

www.jsfiddle.net/rEPXY/9

Answer 3

Co ja nie rozumiem, dlaczego masz na granicy znacznika. Zgaduję, że kiedy dodasz obramowanie, znacznik zostanie zinterpretowany przez przeglądarkę jako element z zawartością w nim, a tym samym prawdopodobnie przydzieli domyślną wysokość linii i dostosuje szerokość do zawartości wewnątrz znacznika.

Answer 4

żywo Przykład: http://jsfiddle.net/rEPXY/18/

Obraz jest traktowana jako inline, więc jej będzie przylegać do font-size i wysokość linii, wraz z przerwami liniowych. Zmień naturę obrazu i jego kontenera i powinieneś być dobry. CSS poniżej znacznika <a> korzysta inline-block ale można też zmienić na block z width własności

Jeśli pływak tag <a> też jego zamiar stać się kłopotliwe, wyrównaj go z innymi elementami.

img 
{ 
    border:1px solid black;float:left; 
} 
a 
{ 
    border:1px solid red;display:inline-block; 
} 

Answer 5

According to this można rozwiązać dodając następującą regułę:

a img {vertical-align:bottom} 

Wydawało się, że działa na mnie w swoim jsfiddle.