Урок: измерить схлопывание соседних отступов

Назначение

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

Как это работает

Создайте два абзаца внутри section id margin-lab. Задайте первому margin-bottom:32px, второму margin-top:16px, а остальные margin обнулите. После разметки измерьте промежуток между рамками элементов.

Пример

const first = document.querySelector("#margin-lab p:first-child");
const second = document.querySelector("#margin-lab p:last-child");
const gap = second.getBoundingClientRect().top - first.getBoundingClientRect().bottom;
console.log("Промежуток в CSS-пикселях:", gap);

Что должно получиться

В простом обычном горизонтальном потоке положительные соседние отступы схлопываются до большего — 32px. Если родитель станет Grid без gap, margin элементов не схлопнутся и промежуток составит 48px.

Граница применения и частая ошибка

Это ограниченный пример с двумя положительными отступами. Отрицательные значения, пустые блоки, родительские границы и другие контексты требуют отдельного разбора. Не добавляйте padding наугад, пока не установили, какие именно отступы участвуют.

Самостоятельная проверка

Проведите оба измерения и посмотрите box model в инспекторе. Затем добавьте gap в Grid и объясните новое расстояние. Верните обычный поток и убедитесь, что геометрию не меняют другие правила таблицы стилей.

Связанные материалы

• Локальный просмотр
• Регрессионная проверка
• Панель Network