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

Voici une bonne façon de procéder :

span + span {
    margin-left: 10px;
}

Chaque span précédé d'un span (ainsi, chaque span à l'exception de la première) auront margin-left: 10px .

Voici une réponse plus détaillée à une question similaire : Séparateurs entre les éléments, sans piratage

Answer 2

Ajoutez ces règles au conteneur parent :

display: grid
grid-auto-flow: column
grid-column-gap: 10px

Une bonne référence : CSS Reference - Un guide visuel gratuit pour CSS

Compatibilité avec les navigateurs : Prise en charge des navigateurs pour les grilles CSS

Answer 3

Il suffit d'utiliser margin ou padding.

Dans votre cas particulier, vous pourriez utiliser margin:0 10px uniquement sur la deuxième <span> .

Voici une belle solution CSS 3 ( JSFiddle ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

Sélection avancée d'éléments à l'aide de sélecteurs tels que :nth-child() , :last-child , :first-of-type etc. est pris en charge puisque Internet Explorer 9 .

Answer 4

Vous pouvez styliser des éléments en excluant le premier d'entre eux, en une seule ligne de code :

span ~ span {
    padding-left: 10px;
}

Il n'est pas nécessaire de changer de classe.

Answer 5

Vous pouvez profiter du fait que span est un élément en ligne :

span{
     word-spacing: 10px;
}

Cependant, cette solution ne fonctionnera pas si vous avez plus d'un mot de texte dans votre portée.