Расстояние

Обновите макет, не создавая новые классы. Помощники интервалов полезны для изменения padding и margin элемента.

Playground

Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.

Как это работает

Примените margin или padding к элементу в диапазоне от 0 до 5. Инкремент каждого размера был разработан для согласования с общим интервалом Material Design. Эти классы могут применяться с использованием следующего формата {property} {direction} - {size}.

property применяет тип интервала:

  • m - применяет margin
  • p - применяет padding

Параметр direction обозначает сторону, к которой относится свойство:

  • t - применяет свойство для margin-top или padding-top
  • b - применяет свойство для margin-bottom или padding-bottom
  • l - применяет свойство для margin-left или padding-left
  • r - применяет свойство для margin-right или padding-right
  • x - применяет свойство для оба *-left и *-right
  • y - применяет свойство для оба *-top и *-bottom

size управляет приращением свойства:

  • 0 - удаляет свойство для margin или padding установив его на 0
  • 1 - устанавливает margin или padding свойство к $spacer * .25
  • 2 - устанавливает margin или padding свойство к $spacer * .5
  • 3 - устанавливает margin или padding свойство к $spacer
  • 4 - устанавливает margin или padding свойство к $spacer * 1.5
  • 5 - устанавливает margin или padding свойство к $spacer * 3
Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore