Ajouter de l'espace entre les éléments HTML uniquement à l'aide de CSS

Question

J'ai plusieurs éléments HTML identiques qui se succèdent :

<span>1</span>
<span>2</span>
<span>3</span>

Je cherche la meilleure façon d'ajouter de l'espace entre les éléments en utilisant CSS uniquement

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

En outre :

• Veuillez indiquer la compatibilité du navigateur de vos reçus

---

Je ne veux pas utiliser toute balise HTML supplémentaire comme

<span></span>  <span></span>  <span class="last_span"></span>

Je ne veux pas utiliser de tableaux.

Je souhaite que la première et la dernière travée soient ciblées automatiquement par CSS.

Je ne veux pas utiliser JavaScript.

Exigence facultative : la dernière travée peut être pas le dernier enfant de la balise parent, mais il s'agira de la balise dernière travée de la balise parent. Les travées n'ont pas d'autres balises entre elles.

Answer 1

Ou, au lieu de définir la marge et de la remplacer ensuite, vous pouvez la définir correctement tout de suite avec la combinaison suivante :

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

Answer 2

http://hea-www.harvard.edu/~fine/Tech/html-sentences.html

Voici un lien utile à ce sujet.

Answer 3

span.middle {
    margin: 0 10px 0 10px; /* top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Answer 4

/* Horizontal space */
.space-8-x > * + * {
    margin-left: 8px;
}
/* Vertical space */
.space-8-y > * + * {
    margin-top: 8px;
}

<div class="space-8-x">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<div class="space-8-y">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>