Espace vide dans un <li> contenant une image

Résolu/Fermé
Oluram Messages postés 64 Date d'inscription dimanche 16 décembre 2012 Statut Membre Dernière intervention 14 novembre 2020 - 30 déc. 2014 à 14:24
Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 - 30 déc. 2014 à 16:23
Bonjour,

Je cherche à faire une liste de vignettes carrées contenant des photos, et avec une bordure, de cette manière :
http://jsfiddle.net/2Lzowyjp/1/

Mais comme vous pouvez le voir, chaque <li> est plus haut que les images de quelques pixels, ce qui fait que les bordures n'encadrent pas correctement les images.

Avez-vous une idée de ce qui peut causer ça ?

(Je précise que j'ai simplifié le code dans ce jsfiddle pour que ce soit plus clair, mais que j'ai prévu un effet au survol pour faire apparaître un lien, comme ça : http://jsfiddle.net/tk1pm8ny/ D'où les propriétés en commentaire)

Merci d'avance pour votre aide, et bonnes fêtes :)

1 réponse

Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16
Modifié par Mirzo le 30/12/2014 à 14:41
Bonjour Oluram,

J'ai souvent eu le même problème et j'ai trouvé une petite astuce pour corriger cela. Il suffis de mettre tes images en display block :

.gallerie li img {
  width : 100%;
  display:block;
}

Je ne sais pas vraiment ce qui fait que le bloc parent de l'image ne s'adapte pas correctement mais si quelqu'un le sais et passe par là j'en apprendrais un peut plus aussi ;)

--
2
Oluram Messages postés 64 Date d'inscription dimanche 16 décembre 2012 Statut Membre Dernière intervention 14 novembre 2020 2
30 déc. 2014 à 14:59
Ah super, merci !
Il se pourrait donc que ce ne soit pas une erreur/oubli de ma part, mais un défaut inhérent à HTML/CSS ? (comme le "bug" des pixels en trop entre plusieurs <li> disposés en inline/inline-block, qu'on corrige en mettant des commentaires vides entre chaque <li> ?)

En tout cas, merci beaucoup pour la réponse rapide !
0
Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16 > Oluram Messages postés 64 Date d'inscription dimanche 16 décembre 2012 Statut Membre Dernière intervention 14 novembre 2020
30 déc. 2014 à 16:23
Il se pourrais effectivement, après je n'ai pas vraiment trouvé de détails vis a vis de ce "bug"...

Heureux de t'avoir aidé en tous cas :)
0