Problème de marge en bas des images [Résolu]

Bonjour,

Je travaille actuellement à modifier un site.
Le problème, c'est que sous les deux images du bandeau en haut de la page d'accueil, il y a une sorte de petite marge.

J'ai eu beau chercher, je ne parviens pas à comprendre d’où vient cette marge.
Pourriez-vous m'aider s'il vous plait ?

Merci

P.S. : j'espère être dans la bonne section
Modifié par bagu (30 Oct 2011 - 14:40)

Salut la taille de l'image inférieure à celle de son conteneur. Mais le site utilise des table pour la mise en page, c'est pas vraiment au goût du jour.

C'est bien ce qui est étrange, car l'image à une taille définie, et même si je spécifie la taille du td, la marge reste, comme s'il n'en avait rien à faire de la taille que je mets.

(Pour la table, je n'ai pas eu le choix, je ne fais malheureusement pas ce que je veux )

Attention pas de alt sur les images décoratives au passage.
Ton souci c'est parce que l'image contient une border blanche donc il faut la rogner.

Je viens de revérifier, il n'y en a pas sur l'image avec les quatre femmes, et pourtant, il y a bien un décalage...

Salut,
C'est parce que l'image est en display inline-block, tu as donc une zone prévue pour l'empattement des caractères (les "jambes" des p, q...)
Mets display:block sur l'image pour résoudre le problème.

edit : c'est pas l'empattement, mais j'ai oublié le vrai nom ^^
edit 2 : tout bêtement "jambages", ou moins bêtement "panses inférieures"
Modifié par Seven tears (30 Oct 2011 - 02:37)

Impeccable, c'était bien ça. Merci pour tout

Ah, re,
Autant pour moi, c'est paint qui a bugué alors, parce que chez moi j'avais une border blanche sur l'image.

Seven tears a raison, dans le CSS rajouter

img {
    display: block;
}

Seven tears a écrit :
C'est parce que l'image est en display inline-block

En fait par défaut l'image serait plutôt en display:inline. Et ce n'est pas vraiment ça la source du problème (même si ça joue). C'est plutôt le fait que par défaut une image est en vertical-align:baseline, et donc le bas de l'image s'aligne sur la ligne de base du texte, ce qui laisse de l'espace en dessous.

Si on veut rajouter une déclaration qui s'applique à toutes les images de la page, mieux vaut éviter le display:block un peu radical, et opter pour:

img {vertical-align:middle;}

En fait, j'avais déjà testé avec un vertical align middle, et ça ne marchait pas.
Ce que j'ai fait, c'est de faire une classe avec un display block dedans.

Du coup ça roule.

bagu a écrit :
En fait, j'avais déjà testé avec un vertical align middle, et ça ne marchait pas.

Là ça m'étonne. Il était bien appliqué aux images plutôt qu'à leurs éléments parent? Pas d'erreur de syntaxe?

oui, je l'avais même mis sur la balise image en elle même et non dans le fichier css

@fvsch
OK, en cherchant un peu, je me suis rendu compte que je faisais un raccourci entre inline-block et replaced element. On en apprend tous les jours

@bagu
Faudrait remettre l'url, qu'on puisse tester. Parce que comme on dit, "chez moi ça marche".

Je reprends un backup du site, et je vous remets l'url

Ce sera sur http://previalys.bagu.fr

EDIT : je viens de tester en mettant dans le css :

img {vertical-align:middle;}

Et là ça marche Oo
Alors que sur la balise directe, ça ne marchais pas...Peut-être un problème d'orthographe...Je ne pige pas.

RE-EDIT : Bon, cherchez pas, je suis un boulet...J'avais mis vertical-align:midlde;
Modifié par bagu (30 Oct 2011 - 19:39)