Fin décembre dernier, nous abordions les possibilités offertes par le framework pour utiliser les marges internes et externes. Depuis la version 4.2, il est possible d’utiliser les margin (marge externes exclusivement) négatives.
Utilisation
Contrairement aux margin et padding « positives », la margin négative utilise une valeur fixe de 0.25rem par cran. Chaque cran est compris entre 1 et 5.
.mt-n1 {
margin-top: -0.25rem !important;
}"n" pour « négatif » avant la valeur du cranUn exemple concret
Voici un exemple intéressant de margin negative sur le composant card.
Découvrez le code en live sur Codeply
Créer par Carol Skelly
Quel intérêt ?
De nombreux composants disposent de marges externes par défaut. Selon la situation, le besoin de supprimer une marge externe se fait ressentir et permet d’ajuster votre contenu.
Dans l’exemple ci-dessus, nous pouvons voir que la classe permet d’ajuster visuellement votre contenu pour créer un effet de style.