Documentation

Documentation - Espacement.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Spacing. +

Démarrage

Concepts de base

Utilitaires

Composants

Spacing

Marssel permet de gérer les marges et paddings de vos éléments avec une syntaxe intuitive. Utilisez les classes m- pour les marges et p- pour les paddings, suivies de la valeur entre crochets. Les propriétés supportent les unités CSS standards (px, rem, em, %) et peuvent être combinées avec des breakpoints pour un design responsive.

Margin

<!-- Marge uniforme -->
<div class="m-[20px]">Marge de 20px partout</div>
<div class="m-[2rem]">Marge de 2rem partout</div>

<!-- Marges individuelles -->
<div class="mt-[10px]">Marge top</div>
<div class="mr-[15px]">Marge right</div>
<div class="mb-[20px]">Marge bottom</div>
<div class="ml-[25px]">Marge left</div>

<!-- Marge horizontale (left + right) -->
<div class="mx-[30px]">Marge gauche et droite</div>

<!-- Marge verticale (top + bottom) -->
<div class="my-[40px]">Marge haut et bas</div>

<!-- Marges négatives -->
<div class="mt-[-10px]">Marge top négative</div>
<!-- Centrage horizontal -->
<div class="mx-[auto]">Élément centré</div>

Paddings

<!-- Padding uniforme -->
<div class="p-[15px]">Padding de 15px partout</div>
<div class="p-[1.5rem]">Padding de 1.5rem partout</div>

<!-- Paddings individuels -->
<div class="pt-[10px]">Padding top</div>
<div class="pr-[15px]">Padding right</div>
<div class="pb-[20px]">Padding bottom</div>
<div class="pl-[25px]">Padding left</div>

<!-- Padding horizontal (left + right) -->
<div class="px-[20px]">Padding gauche et droite</div>

<!-- Padding vertical (top + bottom) -->
<div class="py-[30px]">Padding haut et bas</div>

Spacing responsive

<!-- Padding qui change selon le breakpoint -->
<div class="p-[10px] md--p-[20px] lg--p-[30px]">
    Padding adaptatif
</div>

<!-- Marge responsive -->
<div class="m-[5px] sm--m-[10px] xl--m-[20px]">
    Marge responsive
</div>

<!-- Combinaison d'axes et breakpoints -->
<div class="px-[15px] md--px-[30px] py-[10px] lg--py-[40px]">
    Spacing complexe
</div>

Syntaxe compacte

<!-- Plusieurs espacements sur un composant -->
<div class="card---[p-[20px]+m-[10px]]">
    Padding 20px et marge 10px
</div>

<!-- Avec breakpoints -->
<div class="md--box---[p-[30px]+mx-[auto]]">
    Padding et centrage sur tablette
</div>

Unités disponibles

<!-- Pixels -->
<div class="p-[16px]">Padding en pixels</div>

<!-- Rem (recommandé) -->
<div class="p-[1rem]">Padding en rem</div>

<!-- Em (relatif à la taille de police) -->
<div class="p-[1.5em]">Padding 1.5em</div>

<!-- Pourcentage -->
<div class="p-[10%]">Padding 10%</div>

<!-- Viewport units -->
<div class="p-[5vh]">Padding 5vh</div>

Exemples pratiques

Aperçu

Titre de la carte

Contenu avec marges appropriées

Titre

Contenu

Élément centré horizontalement

<div class="card---[p-[24px]+m-[16px]+rounded-[8px]+bg-[f8f9fa]]">
    <h4 class="mb-[12px]">Titre de la carte</h4>
    <p class="mt-[8px]">Contenu avec marges appropriées</p>
</div>

<div class="container---[px-[16px]+py-[32px]] md--px-[48px] lg--px-[96px]">
    <div class="mb-[24px] lg--mb-[48px]">
        <h4>Titre</h4>
    </div>
    <div class="mt-[16px] md--mt-[32px]">
        <p>Contenu</p>
    </div>
</div>

<div class="box---[w-[300px]+mx-[auto]+mt-[50px]+bg-[lightblue]]">
    Élément centré horizontalement
</div>

Propriétés disponibles

Propriété  | CSS équivalent               | Description
-----------|------------------------------|---------------------------------
m          | margin                       | Marge sur tous les côtés
mt         | margin-top                   | Marge supérieure
mr         | margin-right                 | Marge droite
mb         | margin-bottom                | Marge inférieure
ml         | margin-left                  | Marge gauche
mx         | margin-left + margin-right   | Marges horizontales
my         | margin-top + margin-bottom   | Marges verticales
p          | padding                      | Padding sur tous les côtés
pt         | padding-top                  | Padding supérieur
pr         | padding-right                | Padding droit
pb         | padding-bottom               | Padding inférieur
pl         | padding-left                 | Padding gauche
px         | padding-left + padding-right | Paddings horizontaux
py         | padding-top + padding-bottom | Paddings verticaux

← Précédent Grid / Flexbox

Suivant → Typographie