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

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

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

Я ищу лучший способ добавить пространство МЕЖДУ элементами, использующими CSS

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

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

Пожалуйста, запишите совместимость браузеров с вашими квитанциями.

UPDATE

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

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

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

Просто используйте margin или padding.

В вашем конкретном случае вы можете использовать margin:0 10px только на втором <span>.

UPDATE

Вот хорошее решение 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 8 и предыдущими версиями.

Ответ 3

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

span{
     word-spacing:10px;
}

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

Ответ 4

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

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

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

и сделано, без манипуляции с классом.

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

По горизонтали

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

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

span{
    margin-bottom: 10px;
}

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

Ответ 8

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Ответ 9

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

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

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