J’en ai passé du temps à chercher la raison de ce mystérieux espace entre deux lignes d’un tableau, lorsqu’une des cellules comporte une image.

Ce problème venait uniquement sous Firefox et uniquement avec un Doctype en XHTML Strict. Pas de problème sous Internet Explorer et même chose avec un autre Doctype même en XHTML Transitional.

Sans solution à mon problème et persuadé que je ne suis pas le seul à l’avoir rencontré, j’ai lancé une recherche sur Google.

La solution est la suivante : rajouté un display:block sur les images.

Pourquoi : parcequ’en XHTML Strict la valeur de base d’une image pour un « display»  est « inline» . De ce faite, l’image se comporte comme du texte et affiche d’office « l’espace descendant» 
utilisé pour le jambage des lettres tel que « j»  « p»  « q»  etc… Rajouté un display:block supprime se jambage et de ce fait l’espace qu’il occupait.

Mais voici une explication bien détaillée sur le problème : Images, tableaux et décalages mystérieux – MDC.

Doctype est un site Questions/Réponses dédié au HTML, CSS et Webdesign.

Vous y posez vos questions (accessible à tous même en invité) et vous attendez ensuite les réponses. Une question peu avoir du coup plusieurs réponses et donc plusieurs solutions.

Cela fait de ce site une bible des astuces HTML, CSS et Webdesign.

Les Questions/Réponses sont triées par nombre de votes, nombre de réponses, popularité…

Il est temps d’y faire un tour : Web design Q&A – Doctype.

Bon le site est en anglais, mais tous le monde le parle :p