Додайте простір між елементами HTML лише за допомогою CSS

У мене є декілька однакових елементів HTML один за одним:

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

Я шукаю найкращий спосіб додати простір МЕЖДО елементами лише за допомогою CSS

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

Додатково:

• Будь ласка, запишіть сумісність браузера своїх квитанцій

ОНОВЛЕННЯ

Схоже, мені було незрозуміло. Я не хочу використовувати будь-які додаткові HTML-марку, як-от

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

Я не хочу використовувати таблиці

Я хочу, щоб перший і останній проміжки автоматично націлювались за допомогою CSS

Я не хочу використовувати JavaScript

Необов'язкова вимога: останній проміжок може бути НЕ ОСТАНОЙ ДИТИКОМИ батьківського тегу, але це буде ОСТАННЯ СПАНА батьківського тегу. Інші теги між прольотами не мають.

Хороший спосіб зробити це:

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

Кожен, який spanпередує span(таким чином, кожен, spanкрім першого), матиме margin-left: 10px.

Ось більш детальна відповідь на подібне запитання: роздільники між елементами без злому

Просто використовуйте запас або підкладку.

У вашому конкретному випадку ви можете використовувати margin:0 10pxлише на 2-му <span>.

ОНОВЛЕННЯ

Ось приємне рішення CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Розширений вибір елементів з допомогою селекторів подобається :nth-child(), :last-child, :first-of-typeі т.д. підтримується починаючи з Internet Explorer 9.

додати ці правила до батьківського контейнера:

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

Хороша довідка: https://cssreference.io/

Сумісність веб-переглядача: https://gridbyexample.com/browsers/

Це так просто.

Ви можете стилізувати елементи, виключаючи перший, лише в одному рядку коду:

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

і зроблено, не маніпулюючи класом.

Ви можете скористатися тим, що spanє вбудованим елементом

span{
     word-spacing:10px;
}

Однак це рішення буде порушено, якщо у вас є більше одного тексту тексту

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

Ви можете написати так:

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

<span>є вбудованим елементом, тому ви не можете робити інтервали на них, не роблячи його рівнем блоку. Спробуйте це

Горизонтальний

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

Вертикальний

span{
    margin-bottom: 10px;
}

Сумісний із усіма браузерами.

Ви повинні загортати елементи в контейнер, а потім використовувати нові функції CSS3, такі як css grid , безкоштовний курс , а потім використовувати grid-gap:valueте, що було створено для вашої конкретної проблеми

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>

Або замість того, щоб встановлювати маржу і замість того, щоб її переосмислити, ви можете просто встановити її належним чином відразу за допомогою наступного комбо:

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>

Якщо ви хочете вирівняти різні елементи і вам подобається мати однаковий запас з усіх боків, ви можете скористатися наступним. Кожен елемент container, незважаючи на тип, отримає однаковий оточуючий запас.

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

Якщо ви хочете вирівняти елементи в рядку, але перший елемент торкається крайнього лівого краю container, а всі інші елементи однаково розташовані, ви можете використовувати це:

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