Как сделать отступ у элементов только между друг другом?

Question

[podushka]

Есть вот такой контейнер с элементами:

<div class="container">
     <div class="element">123</div>
     <div class="element">456</div>
     <div class="element">789</div>
</div>

element - display: inline-block.
вот также рисуночек, тут те же самые элементы в контейнере (надеюсь, понятный):

как сделать отступы только где нарисовано красным? типо как gap для grid. обычный margin не подходит, потому что он делает отступы со всех сторон element, а отступ между контейнером и элементом (зарисовано синим) мне не нужен.

Answer 1

[Александр]

.element + .element {
  margin-left: 20px;
}

https://developer.mozilla.org/ru/docs/Web/CSS/Next...
Ещё варианты:

• flex + gap для схожего поведения с grid'ами;
  
• :first-child + :last-child для удаления лишних margin'ов;
  
• :nth-child для удаления лишних margin'ов;
  
• Как предложили ниже: использование отрицательных margin'ов для внутренней обёртки.
  

Answer 2

[Ankhena]

Что же вас заставляет в современном мире верстать инлайн-блоками?

1. Если элементов только на одну строку, то
.elem:not(:last-child) {margin-right: NNpx}
либо .elem + .elem {margin-left...}
2. Если строк больше, но элементов известное количество, переписываем предыдущую формулу через nth-child
3. Если строк больше и количество элементов в строке неизвестно, придется использовать идиотский способ с отрицательным margin для контейнера на величину лишних отступов.

Но ведь есть же простой, удобный, логичный gap в гридах и флексах!

Comments

[podushka]

Что же вас заставляет в современном мире верстать инлайн-блоками?

мне нужно сделать горизонтальный скролл элементов, типо баннеры.

Но ведь есть же простой, удобный, логичный gap в гридах и флексах!

grid или flex мне не даёт сделать скролл и все элементы подстраиваются под 100% ширины контейнера

[Ankhena]

podushka, знаете, гораздо логичнее задавать именно тот вопрос, в котором проблема, а не неверные выводы из него.
Вероятно, вы забыли про flex-shrink и сделать доп обертку.

Но песочницу на codepen.ru (или аналоге) вы не предоставили, поэтому сложно гадать почему у вас не получилось.

[podushka]

Ankhena, спасибо, flex-shrink мне помог! напишите это в ответы, помечу решением)

Answer 3

[Al T.]

Как вариант предложу сделать доп. обёртку (".inner" внутри ".container")

<div class="container">
  <div class="inner">
    <div class="element">123</div>
    <div class="element">456</div>
    <div class="element">789</div>
  </div>
</div>

Далее в CSS мы делаем боковые margin элементам и отрицательные margin div-обёртке (таким образом лишние margin'ы по бокам "провалятся" в отрицательные margin'ы родительского div-обёртки).

.inner {
  margin: 0 -20px;
}
.element {
  margin: 0 20px;
}