Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.
Utilisez le terrain de jeu pour voir ce que les différentes classes d'aide peuvent faire. Pour une explication de leur fonctionnement, voir la section Comment ça fonctionne ci-dessous.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
En utilisant les classes d'aide à la marge, vous pouvez facilement centrer le contenu horizontalement.
La marge peut également être appliquée négativement à la même fréquence 1 à 12 .
Vuetify est livré avec un système de grille de 12 points construit en utilisant Flexbox. L'espace est utilisé pour créer des mises en page spécifiques dans le contenu d'une application. Il se compose de 5 points de rupture de média utilisés pour cibler des tailles ou des orientations spécifiques d'écran : xs, sm, md, lg et xl. Les résolutions par défaut sont définies ci-dessous dans la table Viewport Breakpoints et peuvent être modifiées en personnalisant la configuration breakpoint service config.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}. This does not apply to xs as it is inferred; e.g. ma-xs-2 equals ma-2.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Espacement avec les points d'arrêt md et lg
Comment ça fonctionne
Les classes d'aide appliquent marge ou padding à un élément allant de 0 à 12. Chaque taille a été conçue pour s'aligner sur des espaces de conception de matériaux communs. Ces classes peuvent être appliquées au format suivant
{property}{direction}-{size}.La propriété applique le type d'espacement :
m- appliquemargep- appliquepaddingLa direction désigne le côté de la propriété à :
t- applique l'espacement pourmarge-topetpadding-topb- applique l'espacement pourMarge-bottometpadding-bottoml- applique l'espacement pourmarge-gaucheetpadding-leftr- applique l'espacement pourmarge-droiteetpadding-rights- applique l'espacement pourmarge-gauche/padding-left(en mode LTR) etmarge-right/padding-right(en mode RTL)e- applique l'espacement pourmarge-droite/padding-right(en mode LTR) etmarge-left/padding-left(en mode RTL)x- applique l'espacement pour*-leftet*-righty- applique l'espacement pour*-topet*-bottoma- applique l'espacement de la propriété dans toutes les directionsLa taille contrôle l'incrément de la propriété en intervalles 4px :
0- élimine toutes lesmargesoupaddingen le définissant à01- définitmargeoupaddingà 4px2- définitmargeoupaddingà 8px3- définitmargeoupaddingà 12px4- définitmargeoupaddingà 16px5- définitmargeoupaddingà 20px6- définitmargeoupaddingà 24px7- définitmargeoupaddingà 28px8- définitmargeoupaddingà 32px9- définitmargeoupaddingà 36px10- définitmargeoupaddingà 40px11- définitmargeoupaddingà 44px12- définitmargeoupaddingà 48pxn1- définit lamargenégative à 4pxn2- définit lamargenégative à 8pxn3- définit lamargenégative à 12pxn4- définit lamargenégative à 16pxn5- définit lamargenégative à 20pxn6- définit lamargenégative à 24pxn7- définit lamargenégative à 28pxn8- définit lamargenégative à 32pxn9- définit lamargenégative à 36pxn10- définit lamargenégative à 40pxn11- définit lamargenégative à 44pxn12- définit lamargenégative à 48pxauto- définit l'espacement àauto