Skip to main content

Spacing

Les classes d'espacement vous permettent de contrôler les marges et les espaces de remplissage d'un élément. Base de 16 pixels.

Exemple générique
.mt{
    margin-top: 16px;
}
.mb{
    margin-bottom: 16px;
}
.pt{
    padding-top: 16px;
}
.pb{
    padding-bottom: 16px;
}

Marge automatique​

Element avec une marge automatique

HTML
  <div class="mx-auto">
    <p>Element avec une marge automatique</p>
  </div>

Pas de marge​

Element sans marge en haut

Element sans marge en bas

Element sans marge verticale

Element sans marge horizontale

HTML
    <div>
        <p class="no-mt">Element sans marge en haut</p>
    </div>
    <div>
        <p class="no-mb">Element sans marge en bas</p>
    </div>
    <div>
        <p class="no-my">Element sans marge verticale</p>
    </div>
    <div>
        <p class="no-mx">Element sans marge horizontale</p>
    </div>

Marge définie​

Element avec une marge en haut (mt)
Element avec une marge en bas (mb)
HTML
    <div class="mt">
        <span>Element avec une marge en haut (mt)</span>
    </div>
    <div class="mb">
        <span>Element avec une marge en bas (mb)</span>
    </div>

Pas de padding​

Élément sans padding

HTML
    <p className="no-p">Élément sans padding</p>

Liste des classes supplémentaire​

  • no-pt : no padding-top
  • no-pb : no padding-bottom
  • no-px : no padding horizontal
  • no-py : no padding vertical

Padding définie​

Élément avec un padding en haut
Élément avec un padding en bas
HTML
    <div class="pt">
        <span>Élément avec un padding en haut</span>
    </div>
    <div class="pb">
        <span>Élément avec un padding en bas</span>
    </div>