Pourquoi balise d'ancrage ne pas prendre de la hauteur et la largeur de son contenant l'élément

Voici mon JsFiddle

Quand j'ai inspecter la taille de l'ancre des étiquettes avec des outils de développement Chrome il me montre 144px*18px pour le 1er élément et 310px*18px pour le 2ème élément.

Je veux savoir pourquoi il ne veut pas prendre de la hauteur et la largeur de l'élément conteneur et la façon dont il est calculé.

CSS:

.gallery {
    background-color: #abcdef;
}
.gallery img {
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
.normal {
    height: 160px;
    width: 110px;
    border: 5px solid black;
}
.wide {
    height: 160px;
    width: 280px;
    border: 5px solid black;
}

HTML:

<div class="gallery">
    <a href="#"> <img class="normal" src=""> </a>
    <a href="#"> <img class="wide" src=""> </a>
</div>

  • pourriez-vous nous donner une explication?
  • Possible duplicat Hérite de la hauteur d'un nœud enfant (IMG à l'intérieur d'Un).
  • d'ancrage, les balises sont des éléments inline. Les éléments en ligne ne pas remplir la largeur de son conteneur, ils ne font que remplir la largeur du contenu qu'ils contiennent. C'est aussi simple que cela. Penser comme ça, si c'était un élément de bloc, alors vous ne pouvez pas placer un lien sur un seul mot dans une phrase.
InformationsquelleAutor Shubendra | 2013-09-03