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

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

Answer 2

Si vous souhaitez aligner plusieurs éléments et avoir la même marge de chaque côté, vous pouvez utiliser la méthode suivante. Chaque élément à l'intérieur de container quel que soit leur type, bénéficieront de la même marge environnante.

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

Si vous souhaitez aligner des éléments dans une rangée, mais que le premier élément touche le bord le plus à gauche de la ligne container et que tous les autres éléments soient également espacés, vous pouvez utiliser ceci :

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

Answer 3

Vous pouvez écrire comme ceci :

span{
    margin-left: 10px;
}

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

Answer 4

Vous devez placer vos éléments dans un conteneur, utiliser les nouvelles fonctionnalités de CSS 3 telles que Grille CSS , un cours gratuit puis utiliser grid-gap:value 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 adds 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>

Answer 5

<span> est un élément en ligne, il n'est donc pas possible de l'espacer sans le mettre au niveau du bloc.

Essayez ceci :

Horizontal

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

Vertical

span{
    margin-bottom: 10px;
}

Il est compatible avec tous les navigateurs.