Как сделать отступы css?

• margin отвечает за расстояние снаружи элемента, между ним и соседями.
• padding это отступ внутри элемента, между рамкой и содержимым.
• Значения можно задавать одним числом для всех сторон или четырьмя через пробел: сверху, справа, снизу, слева.
• margin: 0 auto центрирует блок по горизонтали при заданной ширине.
• Отрицательный margin допустим и иногда полезен, у padding отрицательных значений не бывает.
• Проверяйте box-sizing: border-box, иначе padding увеличивает итоговую ширину элемента сверх заданной.
• Схлопывание вертикальных margin у соседних блоков это нормальное поведение, а не баг, почитайте про margin collapse отдельно.

Margin и padding решают разные задачи, и путаница между ними главная причина кривой вёрстки у новичков. Margin это внешний отступ, расстояние между границей элемента и соседними элементами, он может схлопываться у вертикально идущих блоков, то есть два margin по 20px между соседями не суммируются в 40px, а превращаются в один отступ 20px, это стандартное поведение спецификации, а не ошибка браузера. Padding это внутренний отступ, расстояние между границей блока и его содержимым, оно всегда прибавляется к размеру блока, если не переопределён box-sizing.

По умолчанию box-sizing: content-box означает что заданная width не включает padding и border, то есть блок шириной 200px с padding 20px реально займёт 240px, что часто ломает сетку. Решение простое: поставить * { box-sizing: border-box } глобально в начале проекта, тогда padding и border вписываются в заданную ширину, а не добавляются сверху.

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

Ещё один момент, про который часто забывают: margin в процентах считается от ширины родителя даже для верхнего и нижнего отступа, а не от высоты, это иногда даёт неожиданный результат при вёрстке адаптивных блоков с вертикальными отступами в процентах.

margin снаружи, padding внутри, не путай. .card { margin: 16px; padding: 12px; } Вот и весь секрет, дальше уже нюансы с collapse.

блин у меня карточки почемуто шире контейнера вылезали, оказалось из за padding без border-box, добавил и всё встало на место