Espace indésirable entre deux span

**chlock62** · 21/12/2013, 11h48

Bonjour, j'ai un petit souci de css, il s'agit d'un espace indésirable entre deux span de 4px , sur internet je vois quil s'agit d'un espace normal car les span sont souvent utilisé pour du texte ,mais je désire le retirer.
Voici mon code html

Code html :

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

1
2
3
 
 <span class="first">fdfd</span>
 <span class="second">sdsd</span>

une idée les amis

merci

**Candygirl** · 21/12/2013, 12h40

Bonjour,

Il te suffit de coller les deux span dans ton code:

Code html :

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

<span class="first">fdfd</span><span class="second">sdsd</span>

ou alors mettre le retour de ligne dans un commentaire html:

Code html :

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

1
2
<span class="first">fdfd</span><!--
--><span class="second">sdsd</span>

**elfamine** · 21/12/2013, 12h45

ou un float

Code CSS :

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

1
2
 
span{ float:left; }

**chlock62** · 21/12/2013, 12h48

Finalement je les aie passé en inline-bloc comme ca je peux les dimensionné a mon gout car je vais mettre une mini image dans le premier span donc obige les hauteur largeur

Je vais tester tes conseil tout de même

Merci l'ami

**chlock62** · 21/12/2013, 12h51

merci pour les float elfamine, je les ai testé, beau coup de solution possible en css mais laquel la plus propre

Merci l'ami

**NoSmoking** · 21/12/2013, 15h08

Bonjour,
je dirais que dans ton cas la méthode la moins "propre" est l'utilisation du float:left, qui ôte partiellement l'élément du flux ce qui peut générer d'autres problèmes.

Quand il y a moyen de laisser les éléments dans le flux autant le faire.

je vais mettre une mini image dans le premier span donc obige les hauteur largeur

une simple balise IMG serait peut être suffisante.

Invité · 21/12/2013, 23h16

Bonjour,
la seule solution valable serait de nous montrer ton code CSS, car il n'y a pas de raison qu'il y ait - par défaut - un espace entre des <span>.

**NoSmoking** · 22/12/2013, 08h05

... car il n'y a pas de raison qu'il y ait - par défaut - un espace entre des <span>.

Si, ici on parle de ce foutu whitespace qui en a pourri plus d'un

exemple avec les solutions présentées par Candygirl

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fichu whitespace</title>
<style>
h2{
  font-size:1.5em;
  margin:2em 0 0;
}
span{
  background:#ABC;
}
</style>
</head>
<body>
<h1>Fichu whitespace!!!</h1>
<h2>Deux SPANs à la ligne</h2>
<pre>&lt;span&gt;texte1&lt;/span&gt;
&lt;span&gt;texte2&lt;/span&gt;
</pre>
<span>texte1</span>
<span>texte2</span>
<h2>Deux SPANs qui se suivent sur la même ligne et sans espace entre eux</h2>
<pre>&lt;span&gt;texte1&lt;/span&gt;&lt;span&gt;texte2&lt;/span&gt;</pre>
<span>texte1</span><span>texte2</span>
<h2>Mise en commentaire du retour ligne entre les SPANs</h2>
<pre>&lt;span&gt;texte1&lt;/span&gt;&lt;!--
--&gt;&lt;span&gt;texte2&lt;/span&gt;
</pre>
<span>texte1</span><!--
--><span>texte2</span>
</body>
</html>

Invité · 22/12/2013, 10h32

Ok ok ! Ce whitespace là !

Je pensais que l'espace avait été défini à 4px... (margin ou autre)

**chlock62** · 24/12/2013, 14h08

Salut, je frevien vers vous seulement maintenant, mille excuse

Au sujet de l'espace j'ai utilisé au final la solution suivante, les commentaires de retour a la ligne.

Code html :

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

1
2
<span>texte1</span><!--
--><span>texte2</span>

Merci a tous pour votre participation

**Bisûnûrs** · 31/12/2013, 09h02

Si tu as un serveur PHP installé, personnellement je préfère la solution ouverture/fermeture des balises PHP qui évitent de polluer le code HTML en sortie et de faire télécharger quelques octets inutiles à l'internaute :

Code php :

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

1
2
<span>texte1</span><?php
?><span>texte2</span>

Espace indésirable entre deux span

CSS

Discussions similaires

Partager

Partager