[Résolu] Espace indésirable sous une image

Bonjour,

J'ai un soucis un espace indésirable sous une image. J'ai consulté le forum sans grand succès et notamment le billet de fvsch sur le site ( http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html ).
Si j'ai bien compris la logique et le parallèle avec un caractère de texte, je ne suis arrivé à rien via vertical-align: bootom et pas plus avec vertical-align: middle ou display: block .
A force de lire différentes sources, je finis surtout par tout mélanger et ne plus comprendre grand chose.Conclusion, quelque chose d'évident doit m'échapper, si quelqu'un pouvait m'éclairer… Par avance, merci de votre aide.

La partie html concerné :

<div class="avat">
<p><img src="images/photo.png" alt="" /></p>
</div>

et son pendant Css :

.avat {
	display: block;
	margin: 25px 0;
	text-align: center;
}
.avat img {
	width: 255px;
	height: 255px;
	border: 2px solid #80BF40;
	vertical-align: bottom;
}

Modifié par Mazh (17 Dec 2013 - 23:39)

Bonjour,

Mazh a écrit :
Conclusion, quelque chose d'évident doit m'échapper

Tout pile !
Ton image comporte une ligne de 1px (de hauteur) transparente. Donc forcement le problème ne vient pas du css mais de ton image.

Et là je pleure… comment perdre du temps (juste deux heures et demi) à chercher une erreur qui n'existe pas quand on a juste fait une boulette sur une image "test" pour tester son code.

Je retiens la leçon, à l'avenir je commencerai par vérifier l'image elle-même. Merci !

ah ah
J'ai testé le code dans tous les sens aussi avant de comprendre qu'il fallait peut-être regarder le problème à la source.

Allez bonne continuation !