Как избежать негативных отступов в блочной верстке?

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

• Использовать единую систему отступов при выравнивании блоков. skyeng.ru Рекомендуется применять значения, кратные 8px: 8, 16, 24, 32px. skyeng.ru Это обеспечивает визуальную гармонию и упрощает поддержку кода. skyeng.ru
• Не путать поля и отступы. uzinok.ru Поля можно добавлять только элементам-контейнерам, таким как div, p, section. uzinok.ru А таким элементам, как img или hr, нельзя добавлять поля, им можно добавлять только отступы. uzinok.ru
• Использовать box-sizing: border-box для всех элементов. dzen.ru Это позволит учитывать padding и border внутри заданной ширины и высоты. dzen.ru
• Следить за схлопыванием вертикальных margin. skyeng.ru dzen.ru Чтобы предотвратить слияние отступов, можно добавить свойство overflow: auto или hidden родительскому элементу. skyeng.ru Также можно установить border или padding для родительского элемента. skyeng.ru
• В flex и grid использовать gap, а не margin. dzen.ru Gap работает стабильнее и не схлопывается. dzen.ru
• Проверять дизайн в devtools. dzen.ru Визуальный инспектор показывает box model, это удобный способ отловить неожиданные отступы и перерасход ширины. dzen.ru

Ещё одно правило вёрстки: внешние отступы от объекта всегда должны быть больше отступов внутри этого объекта. vc.ru