Pb marge entre image et un div en HTML5

Bonjour,

Je rencontre un petit soucis de "marge" par defaut en utilisant le doctype HTML 5.

En effet pour faire un test, j'ai placé une image (fond gris png de 19 pixels de haut) suivi d'un div sur fond rouge contenant simplement le texte "test".

Normalement (si je ne me trompe pas) un div ainsi que la balise img n'a pas de marges par défaut, lorsque j'utilise le doctype html 5, j'obtiens pourtant un décalage vertical de 3 pixels exactement entre l'image et le div, exemple ici :
version html 5

Alors qu'en changeant juste le doctype html 4.01 transitional, l'affichage est correct, il n'y a pas de décalage entre l'image et le div, exemple :
verion html 4.01

Je précise que ce comportement est identique quelque soit le navigateur web utilisé...

Vous pouvez visualiser le code source de ces 2 pages, seul le doctype change....Si quelqu'un peut m'expliquer l'origine de ce décalage ?

Merci d'avance.
Modifié par thorinthedwarf (25 Feb 2011 - 00:02)

Bonjour,

Cet espace sous l'image est normal.
Les explications ici: Espaces indésirables sous les images

L'utilisation du Doctype HTML4 Transitional fait que Firefox (et éventuellement certains autres navigateurs) utilisent un mode «Almost Standard», sans espaces de ce type sous les images.

Quoi qu'il en soit, l'utilisation d'un élément IMG pour de la mise en page c'est un peu vieillot comme technique. Une image de fond serait plus adaptée.