Agregue espacio entre elementos HTML solo usando CSS

Tengo varios elementos HTML iguales uno tras otro:

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

Estoy buscando la mejor manera de agregar espacio ENTRE los elementos usando solo CSS

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

Adicionalmente:

• Anote la compatibilidad del navegador de sus recibos

ACTUALIZAR

Parece que no estaba claro. No quiero usar NINGÚN MARCADO HTML ADICIONAL como

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

No quiero usar tablas

Quiero que el primer y el último tramo sean segmentados automáticamente por CSS

No quiero usar javascript

Requisito opcional: el último intervalo no puede ser el ÚLTIMO HIJO de la etiqueta principal, pero será el ÚLTIMO VARÓN de la etiqueta principal. Los intervalos no tienen otras etiquetas entre ellos.

Una buena forma de hacerlo es esta:

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

Cada spanprecedido por un span(por lo tanto, todos spanexcepto el primero) tendrán margin-left: 10px.

Aquí hay una respuesta más detallada a una pregunta similar: separadores entre elementos sin hacks

Solo use margen o relleno.

En su caso específico, margin:0 10pxsolo podría usar el 2do <span>.

ACTUALIZAR

Aquí hay una buena solución CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

De selección de elementos avanzada utilizando selectores como :nth-child(), :last-child, :first-of-type, etc. está soportado desde Internet Explorer 9.

agregue estas reglas al contenedor principal:

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

Buena referencia: https://cssreference.io/

Compatibilidad del navegador: https://gridbyexample.com/browsers/

Eso es tan fácil.

Puede diseñar elementos excluyendo el primero, solo en una línea de código:

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

y listo, sin manipulación de clases.

Puede aprovechar el hecho de que spanes un elemento en línea

span{
     word-spacing:10px;
}

Sin embargo, esta solución se romperá si tiene más de una palabra de texto en su espacio

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

Puedes escribir así:

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

<span>es un elemento en línea, por lo que no puede espaciarlos sin que esté a nivel de bloque. Prueba esto

Horizontal

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

Vertical

span{
    margin-bottom: 10px;
}

Compatible con todos los navegadores.

Debe envolver sus elementos dentro de un contenedor, luego usar las nuevas funciones de CSS3 como la cuadrícula css , curso gratuito y luego usar las grid-gap:valueque se crearon para su problema específico

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>

O, en lugar de establecer el margen y anularlo, puede configurarlo correctamente de inmediato con el siguiente combo:

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 desea alinear varios elementos y desea tener el mismo margen alrededor de todos los lados, puede usar lo siguiente. Cada elemento dentro container, independientemente del tipo, recibirá el mismo margen circundante.

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

Si desea alinear elementos en una fila, pero el primer elemento toca el borde más a la izquierda containery todos los demás elementos están igualmente espaciados, puede usar esto:

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