margin |
Marge |
|---|---|
| Tailwind CSS | |
Classe
| margin |
Description
Cet utilitaire définit l'espace extérieur autour d'un élément, séparant celui-ci des autres éléments voisins et contrôlant les distances dans la disposition globale de la page.
Définition
| Classe | Styles |
|---|---|
| m-<nombre> | margin: calc(var(--spacing) * <nombre>); |
| -m-<nombre> | margin: calc(var(--spacing) * -<nombre>); |
| m-auto | margin: auto; |
| m-px | margin: 1px; |
| -m-px | margin: -1px; |
| m-(<propriete-personnalisee>) | margin: var(<propriete-personnalisee>); |
| m-[<valeur>] | margin: <valeur>; |
| mx-<nombre> | margin-inline: calc(var(--spacing) * <nombre>); |
| -mx-<nombre> | margin-inline: calc(var(--spacing) * -<nombre>); |
| mx-auto | margin-inline: auto; |
| mx-px | margin-inline: 1px; |
| -mx-px | margin-inline: -1px; |
| mx-(<propriete-personnalisee>) | margin-inline: var(<propriete-personnalisee>); |
| mx-[<valeur>] | margin-inline: <valeur>; |
| my-<nombre> | margin-block: calc(var(--spacing) * <nombre>); |
| -my-<nombre> | margin-block: calc(var(--spacing) * -<nombre>); |
| my-auto | margin-block: auto; |
| my-px | margin-block: 1px; |
| -my-px | margin-block: -1px; |
| my-(<propriete-personnalisee>) | margin-block: var(<propriete-personnalisee>); |
| my-[<valeur>] | margin-block: <valeur>; |
| ms-<nombre> | margin-inline-start: calc(var(--spacing) * <nombre>); |
| -ms-<nombre> | margin-inline-start: calc(var(--spacing) * -<nombre>); |
| ms-auto | margin-inline-start: auto; |
| ms-px | margin-inline-start: 1px; |
| -ms-px | margin-inline-start: -1px; |
| ms-(<propriete-personnalisee>) | margin-inline-start: var(<propriete-personnalisee>); |
| ms-[<valeur>] | margin-inline-start: <valeur>; |
| me-<nombre> | margin-inline-end: calc(var(--spacing) * <nombre>); |
| -me-<nombre> | margin-inline-end: calc(var(--spacing) * -<nombre>); |
| me-auto | margin-inline-end: auto; |
| me-px | margin-inline-end: 1px; |
| -me-px | margin-inline-end: -1px; |
| me-(<propriete-personnalisee>) | margin-inline-end: var(<propriete-personnalisee>); |
| me-[<valeur>] | margin-inline-end: <valeur>; |
| mt-<nombre> | margin-top: calc(var(--spacing) * <nombre>); |
| -mt-<nombre> | margin-top: calc(var(--spacing) * -<nombre>); |
| mt-auto | margin-top: auto; |
| mt-px | margin-top: 1px; |
| -mt-px | margin-top: -1px; |
| mt-(<propriete-personnalisee>) | margin-top: var(<propriete-personnalisee>); |
| mt-[<valeur>] | margin-top: <valeur>; |
| mr-<nombre> | margin-right: calc(var(--spacing) * <nombre>); |
| -mr-<nombre> | margin-right: calc(var(--spacing) * -<nombre>); |
| mr-auto | margin-right: auto; |
| mr-px | margin-right: 1px; |
| -mr-px | margin-right: -1px; |
| mr-(<propriete-personnalisee>) | margin-right: var(<propriete-personnalisee>); |
| mr-[<valeur>] | margin-right: <valeur>; |
| mb-<nombre> | margin-bottom: calc(var(--spacing) * <nombre>); |
| -mb-<nombre> | margin-bottom: calc(var(--spacing) * -<nombre>); |
| mb-auto | margin-bottom: auto; |
| mb-px | margin-bottom: 1px; |
| -mb-px | margin-bottom: -1px; |
| mb-(<propriete-personnalisee>) | margin-bottom: var(<propriete-personnalisee>); |
| mb-[<valeur>] | margin-bottom: <valeur>; |
| ml-<nombre> | margin-left: calc(var(--spacing) * <nombre>); |
| -ml-<nombre> | margin-left: calc(var(--spacing) * -<nombre>); |
| ml-auto | margin-left: auto; |
| ml-px | margin-left: 1px; |
| -ml-px | margin-left: -1px; |
| ml-(<propriete-personnalisee>) | margin-left: var(<propriete-personnalisee>); |
| ml-[<valeur>] | margin-left: <valeur>; |
| space-x-<nombre> | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * <nombre>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * <nombre>) * calc(1 - var(--tw-space-x-reverse))); }; |
| -space-x-<nombre> | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * -<nombre>) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * -<nombre>) * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-px | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(1px * var(--tw-space-x-reverse)); margin-inline-end: calc(1px * calc(1 - var(--tw-space-x-reverse))); }; |
| -space-x-px | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(-1px * var(--tw-space-x-reverse)); margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-(<propriete-personnalisee>) | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(var(<propriete-personnalisee>) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(<propriete-personnalisee>) * calc(1 - var(--tw-space-x-reverse))); }; |
| space-x-[<valeur>] | & > :not(:last-child) { --tw-space-x-reverse: 0; margin-inline-start: calc(<valeur> * var(--tw-space-x-reverse)); margin-inline-end: calc(<valeur> * calc(1 - var(--tw-space-x-reverse))); }; |
| space-y-<nombre> | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * <nombre>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * <nombre>) * calc(1 - var(--tw-space-y-reverse))); }; |
| -space-y-<nombre> | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * -<nombre>) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * -<nombre>) * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-px | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(1px * var(--tw-space-y-reverse)); margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse))); }; |
| -space-y-px | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(-1px * var(--tw-space-y-reverse)); margin-block-end: calc(-1px * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-(<propriete-personnalisee>) | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(var(<propriete-personnalisee>) * var(--tw-space-y-reverse)); margin-block-end: calc(var(<propriete-personnalisee>) * calc(1 - var(--tw-space-y-reverse))); }; |
| space-y-[<valeur>] | & > :not(:last-child) { --tw-space-y-reverse: 0; margin-block-start: calc(<valeur> * var(--tw-space-y-reverse)); margin-block-end: calc(<valeur> * calc(1 - var(--tw-space-y-reverse))); }; |
| space-x-reverse | & > :not(:last-child)) { --tw-space-x-reverse: 1; } |
| space-y-reverse | & > :not(:last-child)) { --tw-space-y-reverse: 1; } |
Dernière mise à jour : Vendredi, le 6 février 2026