📏 Espacement

Contrôlez les marges et paddings avec les utilitaires d'espacement responsives d'Orochi.

Système d'espacement

Basé sur une échelle rem : 0.25rem (4px) → 10rem (160px)

Marges


.o-m-{n}  /* Tous côtés */
.o-mt-{n} /* Haut */
.o-mb-{n} /* Bas */
.o-ms-{n} /* Gauche */
.o-me-{n} /* Droite */
.o-mx-{n}  /* Gauche & Droite */
.o-my-{n}  /* Haut & Bas */

Paddings


.o-p-{n}  /* Tous côtés */
.o-pt-{n} /* Haut */
.o-pb-{n} /* Bas */
.o-ps-{n} /* Gauche */
.o-pe-{n} /* Droite */
.o-px-{n}  /* Gauche & Droite */
.o-py-{n}  /* Haut & Bas */

Échelle des valeurs

Classe Taille Valeur
.o-*-0 0rem 0px
.o-*-1 0.25rem 4px
.o-*-2 0.5rem 8px
.o-*-3 1rem 16px
.o-*-4 1.5rem 24px
.o-*-5 3rem 48px

Exemples concrets

Marge extérieure

.o-m-3 (margin: 1rem) 
<div class="o-m-3"></div>

Padding interne

.o-p-4 (padding: 1.5rem) 
<div class="o-p-4"></div>

Combinaison

.o-mt-2 .o-mb-5 .o-ps-3 .o-pe-4 
<div class="o-mt-2 o-mb-5 o-ps-3 o-pe-4"></div>

🎓 Bonnes pratiques

  • Utilisez l'échelle progressive (0-5) pour maintenir la cohérence
  • Combine avec Flexbox pour l'alignement
  • Préférez les utilitaires responsives (ex: .o-tablet-mt-3)