DOCTYPE et espace sous une image

**TSalm** · 02/06/2013, 00h24

Bonjour,

Je ne suis pas très doué en HTML...ma question est possiblement simple.
En spécifiant ce DOCTYPE, j'ai un petit espace en dessous d'une image sur Firefox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Petit espace que je n'ai pas si je ne spécifie pas de DOCTYPE.

Est-ce que quelqu'un connaît ce problème ?
Est-il possible de supprimer l'espace et de garder l'encodage ?

D'avance merci de votre aide.
-Tsalm

**rodolphebrd** · 02/06/2013, 00h31

Bonjour,

je ne sais pas si c'est dû au doctype mais essayez d'ajouter cette portion de code à votre image :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img{
  display:block;
}

**thelvin** · 02/06/2013, 00h59

C'est probablement le code HTML autour de l'image, qui n'est pas interprété pareil s'il y a un doctype ou pas de doctype. Il faut nous montrer le code ou l'URL (pas la peine de poster 15 millions de lignes non plus. Juste le problème, ça suffira.)

Pour résoudre le soucis il suffira de mettre un balisage correct, et éventuellement de régler marges et padding en CSS.

**NoSmoking** · 02/06/2013, 08h41

Bonjour,
les balises IMG sont par défaut en mode de rendu display:inline, ce qui explique l'espace prévue pour l'affichage des jambes des lettres, pqjgy.
La solution préconisée par rodolphebrd devrait supprimer cette espace.

L'utilisation d'un DOCTYPE valide évite aux navigateurs de faire leur propre interprétation et te garantira un minimum de surprise.
A l'heure actuelle il n'est quand même pas bien compliqué de mettre un <!DOCTYPE html> en première ligne d'un fichier HTML.

**nicosmash** · 02/06/2013, 09h54

Bonjour TSalm,

Pourquoi avez-vous choisi ce DOCTYPE ?

**thelvin** · 02/06/2013, 16h54

Ouais enfin ça n'a aucun rapport avec la question, hein.
C'est sûr que c'est pas la peine de s'embêter avec doctype à rallonge, surtout un faux doctype XML, mais c'est pas ça qui joue sur le problème soulevé.

**nicosmash** · 02/06/2013, 17h05

Salut

thelvin :
TSalm dit qu'avec CE doctype il a un soucis alors je lui donne un lui pour qu'il sache et utilise le bon doctype en fonction de ses besoins.

TSalm :
Selon votre navigateur utiliser firebug (http://eric-pommereau.developpez.com...l-web/firebug/) ou autre pour vérifier votre élément en question. Essayez également un margin et padding à 0.

**Candygirl** · 02/06/2013, 17h32

Concernant la relation avec le doctype, cet espacement est l'une des différences de rendu entre le choix d'un doctype transitionnel ou strict (en html 4.01 ou html 1.0).

La raison a été donnée par NoSmoking, une solution par rodolphebrd. Si le display:block n'est pas envisageable, on peut jouer avec la propriété vertical-align. Au lieu du vertical-align: baseline par défaut, un vertical-align:bottom, voire middle devrait aussi le faire disparaître.

Cependant, si le line-height vient à dépasser la hauteur de l'image on peut le voir réapparaître (en haut si vertical-align:bottom, haut et bas si vertical-align:middle). Auquel cas un line-height de 0 est censé le faire disparaître. depuis que les navigateurs sont équipés d'un zoom page plutôt qu'un zoom text seul, le cas devient rare.

**rodolphebrd** · 02/06/2013, 17h52

J'ai essayé le code suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 <div id="content">
        <a href=""><img src="http://lorempixel.com/50/50" /></a>
    </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#content {
	background: #CCC;
	width: 200px;
}
img{
	display:block;	
}

et j'obtiens le même résultat sur Safari, Firefox et Chrome:
- sans doctype;
- en html5;
- en xhtml 1.0 strict;
- en xhtml 1.1;
- en html 4.01 transitional;
- en html 4.01 strict;

**TSalm** · 02/06/2013, 22h26

Merci à tous, ça fonctionne très bien avec le display:block !

Et merci à tous pour vos explications sur le DOCTYPE.

DOCTYPE et espace sous une image

HTML

Discussions similaires

Partager

Partager