Marges

Options

Classe Description
.padding Ajouter une marge intérieure en haut, à droite et à gauche.
.removePadding Supprimer toutes les marges intérieures.
.margin Ajouter une marge extérieure en bas à un élément de type block.
.inlineMargin Ajouter une marge extérieure en bas et à droite à un élément de type inline-block.
.removeMargin Supprimer toute les marges extérieures d'un élément
.padding[L, XL, XXL] Ajouter une marge intérieure sur tous les cotés.
.paddingTop
.paddingTop[L, XL, XXL]
Ajouter une marge intérieure en haut.
.paddingBottom
.paddingBottom[L, XL, XXL]
Ajouter une marge intérieure en bas.
.margin[L, XL, XXL] Ajouter une marge extérieure en haut et en bas.
.marginTop
.marginTop[L, XL, XXL]
Ajouter une marge extérieure en haut.
.marginBottom
.marginBottom[L, XL, XXL]
Ajouter une marge extérieure en bas.

Informations importantes

Les éléments conteneurs (.container, .sidebar, .card...) ont une marge intérieure en haut, à droite et à gauche.

Les éléments de type block qui constituent du contenu (h1, p, button...) ont une marge extérieur en bas.

Les éléments de type inline-block qui constituent du contenu (button...) ont une marge extérieur en bas et à droite.

Les colonnes d'une grille n'ont pas de marge intérieure. Utiliser les classes .gutter et .card.

Pas de marge extérieurs en haut par défault pour éviter les problème de fusion de marge.

Exemple

Carte avec les classes paddingXXL et marginXXL.

<div class="card shadow paddingXXL marginXXL">
    <p>Carte avec les classes <code>paddingXXL</code> et <code>marginXXL</code>.</p>
</div>