Adicione espaço entre os elementos HTML apenas usando CSS

Tenho vários elementos HTML idênticos, um após o outro:

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

Estou procurando a melhor maneira de adicionar espaço ENTRE os elementos usando apenas CSS

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

Além disso:

• Anote a compatibilidade do navegador dos seus recibos

ATUALIZAR

Parece que não estava claro. Não quero usar QUALQUER MARCAÇÃO HTML ADICIONAL, como

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

Não quero usar tabelas

Quero que o primeiro e o último período sejam direcionados automaticamente por CSS

Não quero usar javascript

Requisito opcional: o último período não pode ser ÚLTIMO FILHO da tag pai, mas será o ÚLTIMO SPAN da tag pai. Os spans não têm nenhuma outra tag entre eles.

Uma boa maneira de fazer isso é:

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

Cada spanprecedido por um span(portanto, todos spanexceto o primeiro) terá margin-left: 10px.

Aqui está uma resposta mais detalhada para uma pergunta semelhante: Separadores entre elementos sem hacks

Basta usar margem ou preenchimento.

No seu caso específico, você poderia usar margin:0 10pxapenas no 2º <span>.

ATUALIZAR

Aqui está uma boa solução CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Elemento de seleção avançada usando seletores gosto :nth-child(), :last-child, :first-of-type, etc. é suportado desde que o Internet Explorer 9.

adicione essas regras ao contêiner pai:

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

Boa referência: https://cssreference.io/

Compatibilidade do navegador: https://gridbyexample.com/browsers/

Isso é tão fácil.

Você pode definir o estilo dos elementos excluindo o primeiro, apenas em uma linha de código:

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

e pronto, sem manipulação de classe.

Você pode tirar vantagem do fato de que spané um elemento embutido

span{
     word-spacing:10px;
}

No entanto, essa solução será interrompida se você tiver mais de uma palavra de texto em seu intervalo

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

Você pode escrever assim:

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

<span>é um elemento embutido para que você não possa espaçá-los sem torná-los nivelados. Tente isto

Horizontal

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

Vertical

span{
    margin-bottom: 10px;
}

Compatível com todos os navegadores.

Você deve envolver seus elementos dentro de um contêiner e, em seguida, usar os novos recursos CSS3, como grade css , curso gratuito e, em seguida, usar o grid-gap:valueque foi criado para o seu 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>

Ou, em vez de definir a margem e não substituí-la, você pode apenas defini-la corretamente imediatamente com a seguinte combinação:

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>

Se quiser alinhar vários itens e quiser ter a mesma margem em todos os lados, você pode usar o seguinte. Cada elemento dentro container, independentemente do tipo, receberá a mesma margem circundante.

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

Se você deseja alinhar itens em uma linha, mas o primeiro elemento toca a borda esquerda de containere todos os outros elementos estão igualmente espaçados, você pode usar isto:

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