web-dev-qa-db-fra.com

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

Voici mon JsFiddle

Lorsque j'inspecte la taille des balises d'ancrage avec Chrome, il me montre 144px*18px pour le 1er élément et 310px*18px pour le 2e élément.

Je veux savoir pourquoi il ne prend pas la hauteur et la largeur de l'élément conteneur et comment il est calculé.

.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;
}
<div class="gallery">
    <a href="#"> <img class="normal" src=""> </a>
    <a href="#"> <img class="wide" src=""> </a>
</div>
htmlcsshtml5css3
47
Shubendra

Le spéc. CSS 2.1 dit

Les dimensions de la zone de contenu d'une boîte - la largeur et la hauteur du contenu - dépendent de plusieurs facteurs. la boîte est un tableau, etc. Les largeurs et les hauteurs de la boîte sont abordées dans le chapitre consacré aux détails des modèles de formatage visuel.

Le <a> par défaut, la valeur d'affichage de l'élément est inline. Son contenu participe à la mise en page, donc c'est un non-replaced élément.

Pour la hauteur, la spécification dit:

10.6.1 Éléments intégrés non remplacés

La propriété 'height' ne s'applique pas. La hauteur de la zone de contenu doit être basée sur la police, mais cette spécification ne spécifie pas comment.

Alors 18px est obtenu à partir d'une seule ligne de texte, extraite des métriques de police. Ni le contenu de l'image plus grande, ni la taille du bloc contenant ne jouent aucun rôle.

Pour la largeur, la spécification dit

10.3.1 Éléments intégrés non remplacés

La propriété 'width' ne s'applique pas. Une valeur calculée de "auto" pour "marge gauche" ou "marge droite" devient une valeur utilisée de "0".

autrement dit, la largeur est déterminée par le <a> contenu, éléments, marges et bordures de l’élément.

Pour le premier <a> élément de 114px (contenu - image plus un espace) + 20px (marge de gauche) + 2x5px (bord gauche et droit) = 144px

Pour la seconde <a> élément de 280px (contenu - image) + 20px (marge gauche) + 2x5px (bordures gauche et droite) = 310px

Juste besoin de rendre compte des espaces. Les éléments sont disposés dans une zone de ligne dans un contexte incorporé, de sorte que les espaces au début du premier <a> élément et à la fin du second <a> éléments sont supprimés. Les espaces à la fin du premier <a> _ élément et le début du second <a> éléments sont en cours de réduction dans un espace. Lorsque les espaces sont réduits, c'est toujours le premier espace qui reste, qui dans ce cas est celui situé à la fin du premier <a> élément, c’est pourquoi un espace participe à la largeur du premier <a> élément mais pas dans la largeur du second.

39
Alohci

utilisation display:inline-block en ancre

.gallery a{
    display:inline-block;
}

ici est mis à jour fichier jsFiddle

également supprimer la marge de l'image et l'ajouter à l'ancre

.gallery a{
    display: inline-block;
    margin-left: 20px;
    margin-top: 20px;
}
42
Roy Sonasish

anchor est toujours display: inline par défaut. Pour que anchor prenne son espace enfant, vous devez lui donner un display:block, ou dans ce cas, display:inline-block pour qu’ils soient inlineet block.

a{
    display:inline-block;
}

JSFiddle

Lisez cette question pour plus d'informations .

7
Vucko

Le tag doit également être stylé

J'ai ajouté

.gallery a {
display: inline-block;
}
4
Anagio

J'ai eu le même problème, par exemple, j'ai HTML généré par Markdown aromatisé GitHub, donc peut contenir des paragraphes contenant ancre avec des images à l'intérieur.

Réglage actuel display: inline-block dans les ancres n'a pas fonctionné pour moi j'ai également mis display: block en images. Utiliser Sass a imbriqué quelque chose qui ressemble à ceci:

.gallery {
  a {
      display: inline-block;

      img {
        display: block;
      }
  }
}
0
Gianluca Casati

Au lieu d'appliquer {display: inline-block} sur <a>, essayez d'appliquer {float: left} sur l'enfant de <a>. La hauteur de <a> correspondrait maintenant à la taille de l'enfant.

0
Prashant Nair