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