Добавляйте пробелы между 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предшествует a 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-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;
}