margin-block: внешние отступы по блочной оси
Margin-block задаёт внешние отступы перед и после блока в текущем режиме письма. Это помогает отделять абзацы и секции без привязки к физическим верхней и нижней сторонам.
Назначение
Margin-block задаёт внешние отступы перед и после блока в текущем режиме письма. Это помогает отделять абзацы и секции без привязки к физическим верхней и нижней сторонам.
Как это работает
Одно значение применяется к обоим краям, два — к началу и концу блочной оси. В обычном потоке вертикальные внешние отступы могут схлопываться; переход к логической записи не отменяет это поведение.
Пример
<style>.block-margins p{margin-block:1rem 2rem;padding:.5rem;background:#e4f0e8}.block-margins{display:flow-root;border:1px solid #bdd0c4}</style>
<section class="block-margins"><p>Первый абзац.</p><p>Второй абзац.</p></section>Что должно получиться
Каждый абзац имеет разные отступы перед и после. В обычном горизонтальном потоке расстояние между соседними абзацами определяется правилами схлопывания, а не обязательно суммой 1rem и 2rem.
Граница применения и частая ошибка
Не используйте отрицательный margin для случайного исправления неизвестной причины смещения. Flow-root создаёт отдельный контекст форматирования, но не запрещает все случаи схлопывания между его обычными дочерними блоками.
Самостоятельная проверка
Измерьте расстояние между абзацами в инспекторе. Затем сделайте контейнер Grid и сравните результат. Объясните, почему одинаковые значения margin дают разные промежутки в разных режимах раскладки.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.