Bild innerhalb Link-Tag

Question

Hallo ich eine Website erschaffe beim Platzieren Markenlogo innerhalb Link-Tag oben rechts auf Web-Seite gestoßen ich dieses Problem

 <a href="#" > 
      <img src='img.png'> 

     </a> 

     img { 
      height: 50px; 
      width: 50px; 
     } 

Das Ergebnis ist ein Tag die Wickelbildhöhe ist eigentlich mehr als 50px, obwohl es keinen Text in ein Tag gibt. Aber wenn ich gebe Schriftgröße: 0 funktioniert es.

Also brauche ich den Grund, warum das Link-Tag mehr Höhe nimmt.

Bitte helfen Sie mir diese Konzepte zu verstehen und nicht nur mit einigen CSS-Codes

ich seine haben zu probieren. Bitte hilf mir dabei.

http://jsfiddle.net/amerrnath/TLBEx/

Ok Leider bekam ich die Antwort aus dem Link.

White space at bottom of anchor tag

Danke

Answer 1

Ändern der img s display zu block

a { 
    display:inline-block; 
} 
a img { 
    display:block; 
} 

Sehen Sie diese jsfiddle

Also, was macht es? Das Bild innerhalb des Links hat einen Standard display von inline-block. Die a Sie auf display:inline-block festgelegt. Es ist die Kombination der beiden in Kombination mit Leerzeichen im a Element, das das Problem verursacht.

Sie können simulieren mit zwei verschachtelten inline-blockdiv s, die die Abmessungen nur auf der inneren festgelegt hat. http://jsfiddle.net/TLBEx/4/