Espaciado

Actualiza tu distribución sin crear clases nuevas. Los auxiliares de espaciado son útiles para modificar el padding y el margin de un elemento

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.

Cómo funciona

Aplica un margin o un pading a un elemento que va desde 0 hasta 5. Cada incremento de tamaño fue diseñado para respetar los espaciados comunes ed Material Design. Estas clases pueden ser aplicadas usando el siguiente formato: {propiedad}{dirección}-{tamaño}.

La propiedad aplica el tipo de espaciado:

  • m - aplica un margin
  • p - aplica un padding

La dirección indica de qué lado se aplica el espaciado:

  • t - aplica la propiedad de margin-top o padding-top
  • b - aplica la propiedad de margin-bottom o padding-bottom
  • l - aplica la propiedad de margin-left o padding-left
  • r - aplica la propiedad de margin-right o padding-right
  • x - aplica ambas propiedades *-left y *-right
  • y - aplica ambas propiedades *-top y *-bottom

El tamaño controla los incrementos de la propiedad:

  • 0 - quita el margin o padding asignándoles el valor 0
  • 1 - aplica un margin o padding con un valor de $spacer * .25
  • 2 - aplica un margin o padding con un valor de $spacer * .5
  • 3 - aplica un margin o padding con un valor de $spacer
  • 4 - aplica un margin o padding con un valor de $spacer * 1.5
  • 5 - aplica un margin o padding con un valor de $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