Margin и padding

В Chakra UI управление отступами (margin) и внутренними отступами (padding) реализуется через системные свойства, которые интегрированы с концепцией Styled System. Эти свойства позволяют задавать отступы с высокой гибкостью, используя числовые значения, строки с единицами измерения или сокращенные синтаксисы.

Свойство margin

Свойство margin отвечает за внешние отступы элемента от других компонентов. В Chakra UI оно поддерживает как полные свойства, так и сокращенные варианты:

  • m – общий отступ со всех сторон.
  • mt – отступ сверху (margin-top).
  • mr – отступ справа (margin-right).
  • mb – отступ снизу (margin-bottom).
  • ml – отступ слева (margin-left).
  • mx – горизонтальные отступы (ml + mr).
  • my – вертикальные отступы (mt + mb).

Примеры использования:

import { Box } from "@chakra-ui/react";

<Box m={4} bg="teal.200">
  Общий отступ 4
</Box>

<Box mt={2} mb={6} bg="pink.100">
  Верхний отступ 2, нижний 6
</Box>

<Box mx="auto" w="50%" bg="purple.200">
  Горизонтальное центрирование через mx="auto"
</Box>

Особенности:

  • Значения, переданные числом (m={4}), автоматически переводятся в spacing scale Chakra UI, где 1 = 4px по умолчанию. То есть m={4} эквивалентно 16px.
  • Можно использовать строки с единицами (m="1rem" или m="10px"), что позволяет гибко интегрировать Chakra UI с внешними стилями.

Свойство padding

Свойство padding управляет внутренними отступами, отделяя содержимое компонента от его границ. Аналогично margin, Chakra UI предоставляет сокращения:

  • p – общий padding.
  • pt – padding сверху.
  • pr – padding справа.
  • pb – padding снизу.
  • pl – padding слева.
  • px – горизонтальные padding (pl + pr).
  • py – вертикальные padding (pt + pb).

Примеры:

<Box p={5} bg="orange.100">
  Внутренний отступ 5
</Box>

<Box px={3} py={6} bg="blue.200">
  Горизонтальные padding 3, вертикальные 6
</Box>

Особенности:

  • Padding часто используется для создания визуального “воздуха” вокруг контента внутри компонентов.
  • Можно комбинировать с border и shadow, чтобы создавать карточки и блоки с визуально аккуратными отступами.

Использование responsive значений

Chakra UI позволяет задавать адаптивные отступы, передавая массив или объект с брейкпоинтами. Это упрощает создание интерфейсов, которые корректно отображаются на мобильных и десктопных устройствах.

<Box 
  m={[2, 4, 6]} 
  p={{ base: 2, md: 4, lg: 8 }} 
  bg="green.200"
>
  Адаптивные отступы
</Box>
  • m={[2, 4, 6]} – применяется по порядку к брейкпоинтам [base, sm, md].
  • p={{ base: 2, md: 4, lg: 8 }} – объектная запись, где base применяется по умолчанию, md и lg – на соответствующих ширинах экрана.

Комбинирование Margin и Padding

Часто используются одновременные настройки внешних и внутренних отступов для построения компоновки. Важно помнить:

  • margin влияет на позицию элемента относительно соседей.
  • padding влияет на внутреннее пространство внутри самого элемента.

Пример:

<Box m={4} p={6} bg="cyan.100" border="1px solid teal">
  Внешний отступ 4, внутренний 6
</Box>

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

Работа с отрицательными отступами

Chakra UI поддерживает отрицательные значения margin:

<Box mt={-4} bg="red.200">
  Отрицательный верхний отступ
</Box>
  • Отрицательные значения позволяют накладывать элементы друг на друга, создавать коллажи и смещения, что часто используется в дизайне интерфейсов.

Система spacing scale

Chakra UI использует едининый масштаб spacing, который позволяет согласованно управлять отступами:

  • 0 → 0px
  • 1 → 4px
  • 2 → 8px
  • 3 → 12px
  • 4 → 16px
  • 5 → 20px
  • 6 → 24px
  • 8 → 32px
  • 10 → 40px

Это обеспечивает консистентность дизайна и упрощает поддержку интерфейсов.

Итоговые рекомендации

  • Использовать сокращенные свойства m, mx, my, p, px, py для чистого и читаемого кода.
  • Применять responsive значения через массивы и объекты для мобильной адаптивности.
  • Сочетать margin и padding для точного позиционирования и визуальной структуры.
  • Пользоваться spacing scale вместо случайных пикселей, чтобы дизайн оставался единообразным.

Использование этих подходов позволяет создавать гибкие, адаптивные и визуально гармоничные интерфейсы, полностью используя возможности Chakra UI для управления отступами и внутренними полями компонентов.

Оглавление