Ajouter de l'espace entre les éléments HTML uniquement en utilisant CSS

J'ai plusieurs éléments HTML identiques les uns après les autres:

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

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

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

Aditionellement:

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

METTRE À JOUR

Il semble que je n'étais pas clair. Je ne souhaite pas utiliser de MARKUP HTML SUPPLÉMENTAIRE comme

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

Je ne veux pas utiliser de tableaux

Je veux que le premier et le dernier span soient ciblés automatiquement par CSS

Je ne veux pas utiliser javascript

Exigence facultative: la dernière étendue peut être NOT LAST CHILD de la balise parent, mais ce sera la LAST SPAN de la balise parent. Les travées n'ont pas d'autres balises entre elles.

Une bonne façon de le faire est la suivante:

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

Chaque spanprécédé d'un span(donc, tous spansauf le premier) aura margin-left: 10px.

Voici une réponse plus détaillée à une question similaire: séparateurs entre éléments sans hacks

Utilisez simplement une marge ou un rembourrage.

Dans votre cas particulier, vous ne pouvez utiliser margin:0 10pxque le 2 <span>.

METTRE À JOUR

Voici une belle solution CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

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

ajoutez ces règles au conteneur parent:

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

Bonne référence: https://cssreference.io/

Compatibilité du navigateur: https://gridbyexample.com/browsers/

C'est si simple.

Vous pouvez styliser les éléments en excluant le premier, juste dans une ligne de code:

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

et c'est fait, sans aucune manipulation de classe.

Vous pouvez profiter du fait qu'il spans'agit d'un élément en ligne

span{
     word-spacing:10px;
}

Cependant, cette solution échouera si vous avez plus d'un mot de texte dans votre étendue

span:not(:last-child) {
    margin-right: 10px;
}

Vous pouvez écrire comme ceci:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

<span>est un élément en ligne, vous ne pouvez donc pas les espacer sans le mettre à niveau. Essaye ça

Horizontal

span{
    margin-right: 10px;
    float: left;
}

Verticale

span{
    margin-bottom: 10px;
}

Compatible avec tous les navigateurs.

Vous devez envelopper vos éléments dans un conteneur, puis utiliser de nouvelles fonctionnalités CSS3 telles que la grille css , un cours gratuit , puis utiliser grid-gap:valuecelui qui a été créé pour votre problème spécifique

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

Ou, au lieu de définir la marge et de la remplacer, vous pouvez simplement la définir correctement tout de suite avec le combo suivant:

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

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

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

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

Si vous souhaitez aligner divers éléments et que vous souhaitez avoir la même marge sur tous les côtés, vous pouvez utiliser ce qui suit. Chaque élément avec container, quel que soit son type, recevra la même marge environnante.

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

Si vous souhaitez aligner des éléments dans une ligne, mais que le premier élément touche le bord le plus à gauche de containeret que tous les autres éléments soient espacés de manière égale, vous pouvez utiliser ceci:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}