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

109

У меня есть несколько одинаковых элементов 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

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

Дэн
источник
Возможно, вам стоит подумать об использовании стола. Зависит от того, какие данные попадают вtext
Призрак Мадары
Является ли число spans переменной?
30
В крайнем случае @Truth должны быть таблицы.
Тим Джойс
Эти spanэлементы создаются веб - службы не имеют доступа. Поэтому я не могу изменить разметку. Тем не менее, я могу полностью использовать CSS
Дэн
При ответе на подобные вопросы вы всегда должны указывать, какая поддержка браузера вам нужна. «Мне нужна поддержка IE7» будут получать совершенно разные ответы на «Я использую только Chrome».
30

Ответы:

250

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

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

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

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

тридцать точек
источник
10
Это хорошее решение, хотя, если ваш контейнер будет охватывать несколько строк, он не работает.
Савас Ведова
Он также работает с классами, например:.sidebar-img + .sidebar-text { margin-left: 40px; }
parsecer
2
Как вы справляетесь, когда элементы переносятся на следующую строку?
thdoan
@thdoan: Это зависит от вашего макета и т.д. Вы можете попробовать что-то вроде этого .
30
1
Я предпочитаю решение reddtoric с использованием grid и grid-gap.
Alex Salomon
29

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

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

Симона
источник
У тебя отличный ответ, Симона, но не могли бы вы решить вопрос, не указывая последний spanвручную? Это должно быть работой CSS
Дэн
это ненужный хак, это свойство "word-spacing" для: w3schools.com/cssref/pr_text_word-spacing.asp проверьте ответ Бена
arieljuod
OP требовал пространства между промежутками, поэтому можно дать решение для встроенных элементов, свойства margin / padding / first / last здесь не нужны и только добавляют сложность
arieljuod
На самом деле OP сказал, что он будет использовать spans и divs (которые являются блочными элементами). Ваше решение в любом случае действительно, если вы определяете divs как встроенные элементы ...
Симона
16

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

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

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

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

reddtoric
источник
2
grid-auto-columns="max-content"также может быть полезно. Это приведет к тому, что размер элемента сетки будет соответствовать содержимому. Также совместимость браузеров больше не должна быть проблемой: caniuse.com/#feat=css-grid
Alex Salomon
Это должен быть принятый ответ. Я знаю, что комментарии предназначены не для благодарности, до сих пор я использовал только «гибкий» дисплей, а эта «сетка» делает все это настолько простым из самого родительского контейнера! Чтобы не оставлять его полностью бесполезным, добавлю следующую ссылку, которая очень поможет всем, кто хочет узнать больше: css-tricks.com/snippets/css/complete-guide-grid
Рохан Кумар,
11

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

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

Не нужно менять классы.

Энджи
источник
1
Этот работает идеально. span + span не работает, но span ~ span работает как шарм! Спасибо
juliusmh
В моем случае у меня есть несколько промежутков, некоторые из которых могут не содержать класса «Отображение», поэтому мне нужно span.Showing ~ span.Showingвместо span.Showing + span.Showing. ~- это общий селектор братьев и сестер, где один не должен напрямую следовать за другим.
Эрик
10

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

span{
     word-spacing:10px;
}

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

Бен
источник
6
span:not(:last-child) {
    margin-right: 10px;
}
Владислав Савченко
источник
3

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

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}
Sandeep
источник
2

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

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

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

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

span{
    margin-bottom: 10px;
}

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

Мо Сладкий
источник
2

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

Джон Бэлвин Ариас
источник
Я хотел добавить пространство между элементами класса div, используя стиль css. Я использовал ваш пример для создания своего кода для этого. Работал как шарм. Спасибо!
Elias EstatisticsEU
1

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

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

span:not(:last-of-type) {
    margin-right: 5px;
}
Jalooc
источник
Хороший ответ, ограничение - поддержка браузером :first-of-typeи :last-of-typeселекторов CSS.
Дэн
... также проверьте поддержку notвыражений в браузере
Дэн
1
@Dan, это действительно здорово, все браузеры последних лет покрыты. Но я должен признать, что решение yzoja даже умнее :)
jalooc
Это решение лучше в том конкретном случае, когда вы собираетесь также включить границы между элементами в качестве разделителей (например, как UL в навигационной панели), поскольку оно правильно разместит границу в середине промежутка.
Мир
0
span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>
Тим Джойс
источник
0

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

введите описание изображения здесь

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

Если вы хотите выровнять элементы в строке, но чтобы первый элемент касался крайнего левого края container, а все остальные элементы были расположены на одинаковом расстоянии, вы можете использовать это:

введите описание изображения здесь

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}
Стефан Желязков
источник
2
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как этот код отвечает на вопрос, улучшает его долгосрочную ценность.
β.εηοιτ.βε