Отступы и паддинги

В Vuetify управление пространством вокруг компонентов реализуется через систему утилитных классов для отступов (margin) и внутренних отступов (padding). Эти классы обеспечивают быстрый и гибкий способ задания размеров без необходимости писать отдельные CSS-правила.

Синтаксис классов

Классы имеют стандартный формат:

{property}{sides}-{size}

где:

  • property – тип отступа:

    • m — margin (внешний отступ)
    • p — padding (внутренний отступ)

  • sides — сторона или направление:

    • t — top (верх)
    • b — bottom (низ)
    • l — left (лево)
    • r — right (право)
    • x — горизонтальная ось (left + right)
    • y — вертикальная ось (top + bottom)
    • отсутствует — применяется ко всем четырем сторонам

  • size — величина отступа, числовое значение от 0 до 12. Каждое значение соответствует шагу сетки, где 1 ≈ 4px по умолчанию (в зависимости от темы), 2 ≈ 8px и так далее.

Примеры:

  • mt-4 — верхний margin 16px
  • px-2 — горизонтальный padding 8px
  • m-0 — убирает все внешние отступы

Комбинирование отступов

Можно комбинировать несколько классов одновременно для разных направлений:

<v-card class="mt-4 mb-2 px-3 py-5">
  Содержимое карточки с верхним и нижним margin, горизонтальным и вертикальным padding
</v-card>

Рекомендация: использовать краткие классы x и y, чтобы сократить запись и сохранить читаемость кода.

Отрицательные отступы

Vuetify поддерживает отрицательные margin, что полезно для выравнивания компонентов или перекрытия:

  • -m-1 — отрицательный margin 4px
  • -mt-3 — отрицательный верхний margin 12px

Отрицательные паддинги не поддерживаются — это ограничение CSS.

Автоматические отступы

Для горизонтального центрирования компонентов применяется класс mx-auto:

<v-btn class="mx-auto">Кнопка по центру</v-btn>

Это эквивалентно CSS:

margin-left: auto;
margin-right: auto;

Также возможна вертикальная автоматизация через flex-контейнеры.

Адаптивные отступы

Vuetify предоставляет адаптивные версии классов, которые меняют величину отступа в зависимости от размера экрана:

{property}{sides}-{breakpoint}-{size}
  • breakpoint: sm, md, lg, xl
  • Пример: p-md-6 — padding 24px на устройствах medium и выше

Это позволяет создавать отзывчивые интерфейсы без написания кастомного CSS.

<v-container>
  <v-row>
    <v-col cols="12" class="p-2 p-md-6">
      Контент с адаптивными паддингами
    </v-col>
  </v-row>
</v-container>

Практика с компонентами Vuetify

  • Карточки (v-card): отступы позволяют точно задать пространство между контентом и рамкой.
  • Кнопки (v-btn): padding отвечает за размер кликабельной области, margin — за расстояние между кнопками.
  • Формы (v-form, v-text-field): использование классов mb- помогает организовать вертикальные отступы между полями.
<v-form>
  <v-text-field label="Имя" class="mb-4"></v-text-field>
  <v-text-field label="Email" class="mb-4"></v-text-field>
  <v-btn class="mt-2">Отправить</v-btn>
</v-form>

Важные нюансы

  • Размеры от 0 до 12 могут быть кастомизированы через тему Vuetify, если требуется точная подгонка под дизайн-систему.
  • Комбинация классов работает как каскад: более конкретный класс (например, mt-3) переопределяет общий (m-2).
  • Flex-контейнеры часто требуют корректировки margin/padding для точного выравнивания дочерних элементов.

Интеграция с CSS

Vuetify утилитные классы не мешают обычному CSS:

<v-card class="pa-4 my-2" style="background-color: #f5f5f5;">
  Контент с паддингом и margin, кастомный фон через style
</v-card>

Можно использовать миксование классов Vuetify и собственных правил для расширенной кастомизации интерфейса.

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

Оглавление