html

Question

içinde biraz daha yer kaplayan bir etiket Bir etiketin içine bir resim koydum. ama görüntüye ve etikete sınır verdiğimde. Biraz fazladan alan A etiketi. 'a' etiketi ile bu ekstra alanı aşmak için görüntüyü çevrelemiyor. Kırmızı çizgideki bir etiketi gösteriyorum.

Benim 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

Aradığınız Ne böyle bir şey var mı?

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

Answer 2

bu görüntü size web sitesinde konumlandırılmış olacak nasıl bağlı olarak, <a> ve <img> etiketleri yüzen bu sorunu giderebilirsiniz. Örnek için revize jsfiddle bakınız:

Html:

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

Css: Bir etiketin üzerinde kenarlığı neden yok ne anlama

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

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

www.jsfiddle.net/rEPXY/9

Answer 3

olduğunu. Kenarlığı eklediğinizde, bir etiketin tarayıcı tarafından içeriğe sahip bir öğe olarak yorumlandığı ve bu nedenle muhtemelen varsayılan satır yüksekliğini ayırdığı ve genişliği etiketin içindeki içeriğe uyacak şekilde ayarladığı sınırını eklerken tahmin ediyorum.

Answer 4

Canlı Örnek: onun satır sonları ile birlikte, font-size ve çizgi yükseklikleri uymaları gidiş böylece http://jsfiddle.net/rEPXY/18/

Görüntü satır içi olarak tedavi edilir. Görüntünün ve kapsayıcısının doğasını değiştirin ve iyi olmalısınız. onun diğer unsurlarla zahmetli hizalamak haline gidiyor, <a> etiket için aşağıdaki CSS inline-block kullanıyor ama çok <a> etiketi yüzer bulunurken aynı zamanda bir width mülkiyet

ile block bunu değiştirebilir.

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

Answer 5

According to this, aşağıdaki kuralı ekleyerek çözebilir: En jsfiddle benim için iş gibi görünüyordu

a img {vertical-align:bottom} 

.