Les marges extérieures (margin)

jdb-margin

Les classes de marges extérieures permettent d'ajouter une ou plusieurs marges extérieures à n'importe quel élément.

J'ai 16px de marge à tous les côtés.

Code :

<div class="jdb-section jdb-border">
  <div class="jdb-container jdb-margin jdb-brown">
    <p>J'ai 16px de marge à tous les côtés.</p>
  </div>
</div>

Exemples des marges nommées :

jdb-margin-top

J'ai 16px de marge en haut.

jdb-margin-right

J'ai 16px de marge à droite.

jdb-margin-bottom

J'ai 16px de marge en bas.

jdb-margin-left

J'ai 16px de marge à gauche.

jdb-margin-none

Je n'ai aucune marge extérieure.

jdb-margin-auto

J'ai une marge automatique à gauche et à droite.

jdb-margin

J'ai 16px de marge à tous les côtés.

Exemples des marges numérotées :

jdb-margin-0

Je n'ai aucune marge extérieure.

jdb-margin-4

J'ai 4px de marge en haut et en bas.

jdb-margin-8

J'ai 8px de marge en haut et en bas.

jdb-margin-12

J'ai 12px de marge en haut et en bas.

jdb-margin-16

J'ai 16px de marge en haut et en bas.

jdb-margin-24

J'ai 24px de marge en haut et en bas.

jdb-margin-32

J'ai 32px de marge en haut et en bas.

jdb-margin-48

J'ai 48px de marge en haut et en bas.

jdb-margin-64

J'ai 64px de marge en haut et en bas.

jdb-margin-128

J'ai 128px de marge en haut et en bas.

Les sections

De nombreux éléments HTML n'ont pas de marge au dessus ou en dessous par défaut. Ces éléments s'afficheront sans marge entre eux.

Je suis gris foncé

Je suis marron

La classe jdb-section peut être utilisée pour séparer des éléments.

Elle ajoute une marge de 16px en haut et en bas à n'importe quel élément HTML.

Je suis gris foncé

Je suis marron

Code :

<div class="jdb-section jdb-container jdb-blue">
  <p>Je suis une section.</p>
</div>