CSS margin — синтаксис и примеры
CSS-свойство margin: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
В материале о «margin» основное внимание уделено области «размеры и блочная модель». Формирует внешний отступ вокруг CSS-бокса. Проверяйте поведение «margin» в печатной версии длинного справочного материала, причём сохраняйте реальную длину текста из проекта.
Рабочий критерий для «margin»: проверьте схлопывание вертикальных отступов и логические стороны. Если результат «margin» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис margin
Синтаксис «margin» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
margin: 1rem;
}Как работает margin
Механика «margin» начинается с допустимого контекста и заканчивается наблюдаемым результатом. Формирует внешний отступ вокруг CSS-бокса; для «margin» отдельно проверьте результат при системной тёмной теме.
Проверка в проекте
- Проверьте схлопывание вертикальных отступов и логические стороны; результат относится непосредственно к «margin».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «margin».
- Проверьте «margin» в печатной версии длинного справочного материала через результат при системной тёмной теме и запишите наблюдаемое изменение.
Критерий выбора «margin» — предсказуемая работа в заявленном контексте. Для «margin» подтвердите её через результат при системной тёмной теме и соблюдите ограничение: сохраняйте реальную длину текста из проекта.
Практика с margin
Соберите «margin» на небольшом макете и проверьте предметное условие: проверьте схлопывание вертикальных отступов и логические стороны. Затем для «margin» замените содержимое длинным и сузьте контейнер до 320 px.
Сценарий: в печатной версии длинного справочного материала.
Ошибки при работе с margin
Устойчивость
Margin не создаёт внутреннее пространство и может схлопываться между блоками — это предметный риск для «margin».
Доступность
Непредсказуемое наследование значения из внешнего компонента при использовании «margin».
Каскад
Использование !important вместо разбора каскада; для «margin» проверьте это отдельно.
Поддержка margin
Для «margin» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «margin»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о margin
Как понять, что «margin» выбрано правильно?
«margin» выбрано правильно, когда оно решает задачу «задавать внешние или внутренние размеры и управлять местом для содержимого», сохраняет результат в печатной версии длинного справочного материала и проходит предметную проверку: проверьте схлопывание вертикальных отступов и логические стороны.
Нужен ли запасной вариант для «margin»?
Запасной вариант для «margin» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «margin» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.