Les margins négatives

Les marges négatives sont apparues lors de la mise à jour 4.2 de Bootstrap. Découvrons ensemble comment les appliquer.

Posté le par Benoît Philibert|1383 vues

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;
}
Comme vous pouvez le constater, l’utilisation de la margin négative nécessite de rajouter un "n" pour « négatif » avant la valeur du cran

Un 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.

Pour en savoir plus sur les margin négatives, n’hésitez pas à parcourir la documentation officielle.


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.