Добавить пробел между элементами HTML только с использованием CSS

Question

У меня есть несколько одинаковых HTML-элементов, идущих один за другим:

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

Я ищу лучший способ добавления пробела между элементами, используя только CSS

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

Дополнительно:

• Пожалуйста, запишите совместимость ваших чеков в браузере

---

ОБНОВЛЕНИЕ

ItПохоже, мне было неясно.Я не хочу использовать ЛЮБОЙ ДОПОЛНИТЕЛЬНЫЙ HTML MARKUP, например

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

Я не хочу использовать таблицы

Я хочу, чтобы первый и последний промежутки автоматически предназначались для CSS

Я не хочу использовать javascript

Необязательное требование: последний промежуток может быть НЕ ПОСЛЕДНИМ РЕБЕНКОМ родительского тега, но это будет ПОСЛЕДНИЙ ПРОБЕЛ родительского тега.Между пролётами нет других тегов.

Answer 1

Хороший способ сделать это так:

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

Каждый span, которому предшествует span (то есть, каждый span, кроме первого) будет иметь margin-left: 10px.

Вот более подробный ответ на аналогичный вопрос: Разделители между элементами без хаков

Answer 2

Просто используйте поля или отступы.

В вашем конкретном случае вы можете использовать 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.

Answer 3

Вы можете воспользоваться тем, что span является встроенным элементом

span{
     word-spacing:10px;
}

Однако это решение не работает, если у вас есть более одного слова текста в вашем диапазоне

Answer 4

Это так просто.

Вы можете стилизовать элементы, исключая первый, только в одной строке кода:

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

и готово, без манипуляций с классами.

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Хорошая ссылка: https://cssreference.io/

Совместимость браузера: https://gridbyexample.com/browsers/

Answer 8

Вы должны обернуть свои элементы внутри контейнера, затем использовать новые функции 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>

Answer 9

<span> - встроенный элемент, поэтому вы не можете делать интервалы между ними, не делая его блочным уровнем.Попробуйте это

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

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

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

span{
    margin-bottom: 10px;
}

Совместим со всеми браузерами.

Answer 10

Или, вместо того, чтобы устанавливать поле и затем переопределять его, вы можете сразу же установить его правильно, используя следующую комбинацию:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}