28221 sujets

CSS et mise en forme, CSS3

[résolu]Marges d'images d'origine inconnue sous firefox

Pour une raison inconnue, Firefox applique un espace entre les images de ce code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
* {margin: 0px; padding: 0px;}

</style>

</head>

<body><div><img src="minou_1x1.jpg" width="833" height="123" alt="" /><img src="minou_2x1.jpg" width="833" height="123" alt="" /><img src="minou_3x1.jpg" width="833" height="124" alt="" /><h1><img src="minou_4x1.jpg" width="833" height="84" alt="Nap Time, Cerveau Optionnel v14.0" /></h1><img src="minou_5x1.jpg" width="833" height="39" alt="" /></div>

</body>
</html>


Normalement, j'éliminerait ce bug sous IE en supprimant des sauts de lignes (du moins si l'espace était horizontal), mais il n'y a RIEN dans le code qui semble être à même de provoquer cet espace.

C'est pourtant pas la première fois que j'emploie ce type de "liste d'image" sur un layout, et ça ne m'avait jamais causé d'emmerdes avant!
Modifié le 21 Dec 2004 - 00:46
Pas facile avec si peu d'info.

Ça viendrait pas de ton troisième minou ?

<img src="minou_1x1.jpg" width="833" height="123" alt="" />
<img src="minou_2x1.jpg" width="833" height="123" alt="" />
<img src="minou_3x1.jpg" width="833" height="[b][#red]124[/#][/b]" alt="" />


<edit>
Finalement non. Je ne pense pas que j'ai saisi ton problème.
</edit>

Pourrais-tu indenter ton code pour qu'il soit lisible ?
Joindre tes images pourrait aider à saisir ton problème.

Si l'espace survient au dessus de <h1>, essais un line-height: 1em; ou même 0.

Sinon je ne vois pas pour l'instant.
Modifié le 18 Dec 2004 - 00:34
C'est normal, les images sont des élement inline, avec, comme pour du texte, une marge inférieure par défaut.

Solution :
img {display:block;}

Smiley cligne
Administrateur
Shemu a écrit :
C'est normal, les images sont des élement inline, avec, comme pour du texte, une marge inférieure par défaut.

Solution :
img {display:block;}

Smiley cligne

La solution est bonne, mais l'explication n'est pas tout à fait juste.

En fait, un texte n'a pas de marge par défaut. Par contre, il dépend de ce qu'on appelle le "jambage" (je ne suis plus sûr du terme), c'est à dire qu'il laisse de la place pour les lettres comme "q", "p", etc.

Il ne faut pas confondre ça avec les marges (margin / padding) par défaut sur les balises bloc... sinon l'astuce que tu as utilisé aurait fonctionné (* {margin: 0px; padding: 0px;}) Smiley cligne

L'explication détaillée :
http://www.alsacreations.com/blog/index.php?2004/06/15/25-espaces-indesirables
Sujet clos
Aller à