Pour chippoter : Balise img et marge par défaut

Bonjour,


Par habitude je laisse en principe les marges par défaut sur mes balises XHTML (p, ul, h1 ect...)
Question de lisibilité

Je viens toutefois de remarquer que la balise img n'avait pas de marge par defaut.
Quand elle se trouve entre deux paragraphes pas de probleme, les marges de la balise p empêchent que l'image se colle au texte.

Mais si maintenant je place deux images à la suite, la les deux se collent.

Je trouve cela pas logique, pourquoi les balises img n'ont donc pas de marge par défaut ?

Pour remédier au problème il ya donc deux solutions :
- Spécifier une marge dans le css
- Mettre les images dans des balises p

Une meilleur que l'autre ?

Vaut mieux les spécifier dans le CSS

FlorentG a écrit :
Vaut mieux les spécifier dans le CSS

De mon côté pensais à la solution de les caler dans des paragraphes pour la simple raison que si l'on désactive le css, ça risque de pas être très lisible dans certains cas ou il y a beaucoup d'images.
Mais bon je ne sais pas si c'est effectivement la meilleur solution, et même si il y'en à une meilleur que l'autre.

D'autres avis peut être ?

Bonjour,
je ne vois pas ce qu'il y a d'illogique là-dedans, certaines image ont besoin
d'être collées les une aux autres et d'autres ont besoin d'être intégrées a
l'intérieur d'un paragraphe sans devoir y ajouter de marges, d'ou leur
affichage par default en boîte de ligne (via display:inline).

La plus mauvaise raison sans doute est la necessité d'un découpage préalable
d'une image de grande taille pour pouvoir être par la suite imbriquées dans des
cellules de tableau, même si c'est une méthode has been.

Pour répondre à ta deuxième question, inclure ton image dans un <p>
ne devraient nécessaire que si l'image (de contenu et non décorative)
contient une alternative textuelle qui doit être séquencée, c-a-d
que le contenu du alt (en général assez long mais ne devant pas dépasser
60 caractères pour une image non lien) devraient produire une rupture
rythmique (visuelle ou auditive) comme le fait un paragraphe, dans un
contexte de consultation via logiciel de synthèse vocale ou en
l'absence de chargement d'images.
Modifié par Hermann (26 Jul 2007 - 12:50)

Merci je comprends mieux le pourquoi

Pendant que j'y suis, je suis un peu perdu entre séparer le contenu brut de la présentation, donc si je veut aligner une image a gauche dans un paragraphe et laisser un petit espace autour de l'image :

Je doit utiliser les attributs align, hspace et vspace ou faire tout ça via css ?

Je dirais CSS car aligner une image a gauche ou a droite ça relève plutot de la présentation, mais je suis pas sûr

supercanard a écrit :
Je dirais CSS

Je dirais que tu as raison.

supercanard a écrit :
Merci je comprends mieux le pourquoi
Je doit utiliser les attributs align, hspace et vspace ou faire tout ça via css ?

Attention, ces attibuts de présentation sont des attributs dépréciés puisque
ce n'est plus le rôle de HTML de gérer la présentation (depuis au moins 10ans)
mais celui de CSS, même si l'utisation intensive de ces attributs a perduré au
moins jusqu'a que le support CSS des différents navigateurs soit correcte.
Modifié par Hermann (26 Jul 2007 - 13:02)

Oki bon c'est presque ok
Pour en revenir aux images, je peut donc tout simplement attribuer le css par defaut des paragraphes aux balises img :

img {
display: block;
margin: 1em 0;
}

Sinon j'ai une autre petite question. J'ai trouvé la feuille de style par défaut de firefox mais je cherche en vain celles D'IE.
Quelqun sais ou je peut trouver ça ?

Salut,

je ne pense pas que tu puisses y accéder mais avec la IE Developer Toolbar tu peux voir ce qui est généré.

Le rendu d'IE ou D'opera ne se fait pas via la feuille de style du navigateur
mais par un moteur de rendu interne donc inaccessible.

Je te conseil de lire les artices d'Alsa, l'un d'entre aux (sur les styles par defaults) référence
ce tableau de test.
Modifié par Hermann (26 Jul 2007 - 13:38)