Почему отрицательный margin не работает?

Question

[Dubrovin]

Почему отрицательные маржины не работают?
https://codepen.io/anon/pen/ZxEdda

Comments

[twobomb]

Работает, измените на 0 и увидите разницу

Answer 1

[Петр]

У вас все работает. В chrome нажмите F12 и посмотрите свойства элементов.

Comments

[Dubrovin]

Не работает. Вот в таком варианте https://codepen.io/anon/pen/LdYwEq не работает нижний маржин.
Отступы должны быть только между колонками, ни сверху, ни снизу. Как это реализовать?

[Петр]

Dubrovin, Работает, но не правильно используете. Если не нужны сверху и снизу, так не задавайте их.
margin: 0 10px;

[Антон Спирин]

Dubrovin, так никто не верстает и это и не должно работать. Для row добавляют отрицательный margin только по оси x.

.row {
  margin-left: -10px;
  margin-right: -10px;
}

И это используют только для универсальной сетки с рвзмерами задаными в процентах и переносами элементов по медиазапросам. Если вам не нужен такой функционал, то и отрицательный margin использовать не нужно.

[Dubrovin]

Антон Спирин, как тогда добавить правильно вертикальные отступы между элементами в случае их переноса на новую строку? Можно пример на codepen?
Почему всё же не работают маржины по оси Y ?

[Антон Спирин]

Dubrovin, задачу свою покажите. Вертикальные отступы добавляют с помощью положительного margin.

[Dubrovin]

Антон Спирин, дак вот на codepen задача, только нужно нижний margin убрать, чтобы отступы были только между колонками внутри row и если колонки в несколько рядов, то между ними вертикальные отступы были, при этом между верхней границей row и нижней границей row и колонками отступа быть не должно.
Нужно сделать то-же самое что реализуется с помощью:
display: grid;
grid-gap: 10px;
только на flexbox, потому что css grid не поддерживает перенос колонок при сжатии.

[Alexander Litvinenko]

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

Но существует такая штука как схлопывания вертикальных margin, именно из-за нее вертикальные margin и не любят. Если не умете с этим работать, то лучше использовать padding в родителе.

вы также можете оцентрировакть через flex, это будет удобнее всего, я бы сделал так.

[Dubrovin]

Alexander Litvinenko, можете привести пример в codepen как можно реализовать сетку с отступами между колонками, чтобы границы родителя шли по линии внешних границ колонок?

[Alexander Litvinenko]

Dubrovin, извините, не в моих правилах давать готовый код новичкам, они потом становяться говнокодерами. Это очень простой код.

[Dubrovin]

Alexander Litvinenko, был бы код очень простым, сетка flexbox была бы уже стандартом, и не было бы велосипедов.
не можете привести пример, значит сами не до конца понимаете, как это реализовать.

[Dubrovin]

Пока что вариант получается вот такой: https://codepen.io/anon/pen/EEaYWj
p.s. исправил ссылку

[Антон Спирин]

Alexander Litvinenko, отрицательный margin по оси y - очень плохая практика и в 99,99% кейсов можно найти более изящное решение.

[Антон Спирин]

Dubrovin, для чего вам такой странный кейс? Покажите практическое применение. Универсальную сетку так никто не делает. Либо делайте, что-то проще под конкретную задачу, либо делайте универсальную гибкую сетку.

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -$row-gutter / 2;
}

.col {
  padding: 0 $row-gutter / 2;
  margin-bottom: $col-margin-bottom;
  flex: 0 0 25%;
  max-width: 25%;
}

Это классика. Но вам надо немного другое решение.

А вот это, например, страшный костыль и так не верстают вещи которые должны быть универсальными:
width: calc( 25% - 20px );

[Dubrovin]

Антон Спирин, как убрать зазор $col-margin-bottom снизу если все колонки встали в 1 ряд?

[Антон Спирин]

Dubrovin, вы задачу свою опишите. Возможно вам тут даже сетка не нужна. Вы планируете количество элементов менять на строку? Если нет, ваше решение что-то вроде https://jsfiddle.net/rockon404/o650h1kb/ .
Если надо, то я не вижу в вашем примере ни одного медиазапроса. Более того, если вы покажите свою реальную задачу, то уверен, скорей всего выяснится, что вы выбрали не самый рациональный путь для ее реализации.

[Dubrovin]

Антон Спирин, задача сверстать вот такую универсальную адаптивную сетку: prntscr.com/ip0osv
контейнер, который показан на скриншоте розовым, должен быть без отступов снизу сверху справа слева.
отступ должен быть только между элементами.
Это легко делается с помощью CSS Grid и Grid Gap, но адаптивность должна работать следующим образом:
если ширина у элементов (на скриншоте показаны жёлтым цветом) задана фиксированной в пикселях (width или min-width) и, например, для 3-х элементов в ряду эти элемены перестают "помещаться" в контейнер при сжатии экрана, то элементы должны переноситься на новую строку.

Медиазапросы хорошо работают когда колонки "резиновые", т.е. заданы в процентах. При этом идёт привязка к ширине экрана. А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии, то они автоматически переносились. Сделать это с помощью CSS Grid, когда внутри грида элементы с разной шириной, насколько я знаю, невозможно, поэтому пытаюсь сделать это на Flexbox.

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

[Dubrovin]

Количество элементов в контейнере может быть произвольным, например, это карточки блога или портфолио. Темплейт сетки также может быть произвольным.

[Alexander Litvinenko]

Dubrovin, простите но это даже не трансформация на псевдоэлементах.
Антон Спирин, незнаю, не вижу ниодной причины не использовать отрицательный margin если понимаешь что ты делаешь.

[Антон Спирин]

Alexander Litvinenko, когда нет другого выхода и действительно знаешь, что делаешь, то спору нет. Но поддерживать и масштабировать проще когда не используешь таких радикальных мер или хотя бы сводишь такие приемы к минимуму.
В данном случае, возможно, отрицательный margin и будет оптимальным решением. Хотя требования к сетке, имхо, высосаны из пальца и ничем внятным не обоснованы.

Dubrovin, на практике такое обычно не применяют, так как нижний margin в большинстве кейсов если и не необходимость, то приветствуется.

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

С такими требованиями у вас точно не получится универсальной сетки. это как минимум будет некрасиво и непредсказуемо смотреться, когда контент в контейнере разной ширины. В таком случае ваши карточки блога и портфолио будут смотреться весьма печально.
Если вы посмотрите сайты с сетками заполненными фиксированными элементами, то по-хорошему они работают немного по другим правилам, там по медиазапросам уменьшается ширина всего контейнера.
Советую проектировать такие вещи исходя из реальных задач, а для реальных задач в большинстве своем хватает простых и проверенных решений.
И тут напрашивается вопрос, а зачем вы вообще тратите время изобретая велосипед, когда есть целая куча готовых универсальных решений?

[Dubrovin]

Антон Спирин, погуглите flexbox grid without media queries.
сетка вообще получается без медиазапросов, весь css сетки уменьшается в 1кб. На счёт разной ширины - если ширина нужна одинаковая то это легко делается модификатором у блока сетки с flex-grow: 1;
На счёт вашей кучи готовых универсальных решений - эти решения хреново работают, например, с формами, где в одном боксе могут лежать поля абсолютно разной, но кратной, ширины. Второй момент - размер, не встречал сетку размером меньше килобайта (возможно я плохо ищу).
На счёт своего вопроса - решение было простым, нужно было добавить overflow: hidden контейнеру, в котором находится ряд. При этом отрицательные маржины отлично работают по вертикали без костыля с нижним маржином, который вы предлагаете.

Ещё кстати минус вашего решения в том, что вы не сможете замиксовать класс колонки самому элементу, т.е. вам обязательно нужно вкладывать элементы внутрь div'а с колонкой (это потому что внутри вы используете именно положительный padding, а нужно использовать положительный margin, потому что padding используется для позиционирования содержимого контента, а не позиционирования элемента в блоке. Элементарный пример - Поле input или кнопка, у которых уже задан padding. В моём примере я могу замиксовать кнопку с колонкой и вложить в ряд, который является формой и всё это будет прекрасно адаптивно работать на любом экране без медиазапросов и без лишних дивов с class="col" и class="row").

p.s. Вы используете готовое, видимо потому, что у вас дедлайны и нет времени на подумать и изобрести своё, но лучше. У меня времени предостаточно :)

[Dubrovin]

Пример сетки с использованием flex-grow и с контентом разной ширины внутри: https://codepen.io/anon/pen/ZxYrwE

[Антон Спирин]

Dubrovin,
0. вы сначала пишите, что вам нужна сетка с фиксированными элементами, а затем скидываете пример с резиновыми элементами. Ваши элементы больше не фиксированные, так как вы добавили flex-grow. Не надо так. Учитесь точно формулировать требования.
1. По поводу сетки без медиазапросов. Я вам написал выше, что в таком случае медиазапросы ставят на контейнер. В противном случае при схлопывании сетки, она будет уже остального контента на странице. Что в большинстве случаев не должно происходить.
Решайте задачи опираясь на реальные кейсы.
2. Само решение с overflow: hidden - грубейший и нелепейший костыль. Попробуйте добавьте в элементы своей сетки dropdown или всплывающий tooltip и везде где они будут выходить за край сетки, они будут скрыты за overflow.
3. Ваша навязчивое желание уложиться 1кб в 2018 году не несет под собой никаких объективных плюсов. Надуманные предрассудки и экономия на спичках.
4. Если у вас не работают готовые решения, написанные профессионалами и прошедшие проверку временем, вывод напрашивается только один, вы не умеете их использовать.
5. Нижний margin в верстке сетки не костыль, в отличии от отрицательного.
6. Я вам своего решения не предлагал, разве скидывал фидл с простым и изящным решением, на случай если не нужна сетка и отрывок кода из Twitter Bootstrap 4. Если вы думаете, что вы лучший программист, чем команда Twitter, то вы очень сильно ошибаетесь.
Если вы в их решении замените padding на margin, то вся ваша верстка рассыпется. Лучше попробуйте детально разобрать их решение, посмотреть на бесчисленные кейсы применения и подумать, почему их универсальная сетка получилась именно такой какая она есть. Очень развивает.
7. Мы в компании как раз не используем готовых решений. Не используем по той простой причине, что умеем верстать и проектируем компоненты исходя из реальных задач, а проекты у нас большие и долгосрочные. Вам же я рекомендую не изобретать велосипеды и отталкиваться от решений профессионалов, так как, насколько я вижу, вы и верстаете плохо и опыта у вас, видимо, совсем нет, так как в ваших попытках найти решение уже промелькнула целая куча грубых костылей, которые дали бы о себе знать при попытке такое решение использовать.

Повторюсь. Проектируйте компоненты и их поведение исходя из реальных задач. Если надо универсальное решение, лучше берите готовое написаное профессионалами.