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.
Vous devez vous connecter pour publier un commentaire.
La CSS 2.1 spec dit
La
<a>
élément par défaut est la valeur d'affichage deinline
. Son contenu participer à la mise en page de sorte qu'il est unnon-replaced
élément.Pour la hauteur, la spec dit:
Donc
18px
est arrivé à partir d'une seule ligne de texte, pris de la mesures de police. Ni le plus grand contenu de l'image, ni le bloc contenant la taille joue une partie.Pour la largeur, la spec dit
en d'autres termes, la largeur est déterminée par la
<a>
de l'élément de contenu, les rembourrages, les bordures et les marges.Pour la première
<a>
élément qui 114px (contenu de l'image de plus un espace) + 20px (marge de gauche) + 2x5px (à gauche et à droite de la bordure) = 144pxPour la deuxième
<a>
élément qui 280px (contenu de l'image) + 20px (marge de gauche) + 2x5px (à gauche et à droite de la bordure) = 310pxJuste besoin de compte pour les espaces. Les éléments sont disposés dans une zone de ligne dans un inline contexte, de sorte que les espaces au début de la première
<a>
élément et à la fin de la deuxième<a>
élément sont abandonnés. Les espaces à la fin de la première<a>
élément et le début de la deuxième<a>
élément sont regroupés en un seul espace. Lorsque les espaces sont réduits, il est toujours le premier espace qui reste, qui dans ce cas est celui à la fin du premier<a>
élément, c'est pourquoi un espace participe à la largeur de la première<a>
élément, mais pas dans la largeur de la deuxième.When spaces are collapsed, it's always the first space which remains, ... so that's why a space participates in the width of the first <a> element but not in the width of the second one.
. Maux de tête effacée à la fin.utilisation
display:inline-block
de l'ancreici est mis à jour jsFiddle Fichier
également supprimer la marge de l'image et l'ajouter à l'ancre
anchor
est toujoursdisplay: inline
par défaut. Pour faireanchor
a pris de l'enfant de l'espace, vous devez lui donner undisplay:block
, ou dans ce cas,display:inline-block
de sorte qu'ils serontinline
etblock
.JSFiddle
Lisez cette question pour plus d'info.
L'un de l'étiquette doivent être de style ainsi
J'ai ajouté
Au lieu d'appliquer {display: inline-block} sur <a>
essayez d'appliquer {float: left} sur l'enfant de <a>. La hauteur de la <a> serait maintenant de faire correspondre la hauteur de l'enfant.
J'ai eu le même problème, par exemple, j'ai du code HTML généré par GitHub saveur de markdown, de sorte que peuvent avoir les paragraphes contenant l'ancre avec images à l'intérieur.
Actualle réglage
display: inline-block
ancres n'a pas fonctionné pour moi je n'ai également misdisplay: block
dans les images. Utilisation de Sass imbriquée quelque chose, il ressemble à ceci: