28173 sujets

CSS et mise en forme, CSS3

Espace entre les images

Bonjour,

Lorsque je positionne 2 images côte à côte, j'obtiens systématiquement un espace entre ces 2 images.

Voici le code que j'ai :

test.html

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

<html>

<head>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div>
    <img src="logo1.gif" alt="" />
    <img src="logo1.gif" alt="" />
  </div>
</body>

</html>


style.css

* {
	margin : 0px;
	padding : 0px;
}


J'ai trouvé ici une solution à mon problème : http://forum.alsacreations.com/topic.php?fid=4&tid=13159

Il me suffit, pour supprimer cet espace, de ne pas mettre de retour à la ligne entre mes 2 balises <img>.

Mais je ne comprends pas pourquoi, d'autant que ce retour à la ligne est quand même bien pratique puisqu'il me clarifie la lecture du code.

Est ce que quelqu'un saurait pourquoi ce retour à la ligne crée cet espace et s'il existe un autre moyen que le fait de coller les balises pour supprimer l'espace entre les images ?

Merci
Modifié par PatHibulaire (04 May 2006 - 14:38)
salut PatHibulaire !

Pour supprimer les espaces dans le rendu, tu peux essayer d'appliquer la propriété CSS white-space (valeur nowrap) sur tes éléments, via le sélecteur joker :
*
{
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
Ca fonctionnera peut-être Smiley cligne En l'appliquant sur des éléments liste ça fonctionne, il y a des chances pour que ça soit aussi le cas sur les images et (probablement) tout élément Smiley smile
Modifié par Ladytron (04 May 2006 - 15:40)
Bonjour,

Juste en testant rapidement, je vois qu'un comportement flottant ("float: left;" ou "float: right;") sur l'attribut IMG règle ton problème.
img {
      float: left;
      }
Reste à savoir si ça ne pose pas de problème dans ton design.
Modifié par Smiley neko (04 May 2006 - 15:42)
Oui, mais s'il ne veut pas faire flotter les images, justement ? Smiley cligne

PS : img est un tag (ou un sélecteur, en CSS) ... Pas un attribut Smiley smile
a écrit :
Pas un attribut
Juste. Un sélecteur.
PatHibulaire n'a pas dit ce qu'il désire obtenir, mais juste que ses images ne soient plus séparées par un espace, en tentant de conserver un balisage sur deux lignes...

* {
white-space: nowrap;
}
Ne corrige pas son problème ici. Le seul truc de marrant... ça fait planter DW dès que je l'insère dans une feuille de style liée (le logiciel se ferme automatiquement). Smiley lol C'est assez curieux...
Modifié par Smiley neko (04 May 2006 - 16:02)
En ce cas, on peut effectivement :
- faire flotter les images, ou
- supprimer les marges externes (margin) sur les images Smiley cligne

Combiner les deux sera probablement idéal.

Pour Dreamweaver ... heeuu ... c'est peut-être un bug de DW, nan ? Smiley lol
Si on reprend le code de Pat, les marges et padding sont déjà désactivés sur les images :
[#orange]*[/#] {
      margin : 0px;
      padding : 0px;
      }

Concernant ce problème de balisage qui prend en compte le retour à la ligne comme un espace, on le retrouve sur la balise textarea. Les espaces et retours à la ligne entre <textarea (...)> et </textarea> posent souvent problème.

(Dernier Edit -- il manquait un passage du texte...)
Modifié par Smiley neko (05 May 2006 - 11:54)
Merci pour vos réponses, mais en fait comme je disais plus haut, mon problème est résolu (finalement j'ai opté pour des images d'arrière-plan).

Ça me paraît juste bizarre que ce retour à la ligne crée un espace entre les images.
Sujet clos
Aller à