FR | EN
Installer
Documentation

Documentation - Unités.

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

Démarrage

Concepts de base

Utilitaires

Composants

Unités

Marssel supporte toutes les unités CSS standard pour définir les dimensions, espacements, tailles de police et autres propriétés. Comprendre quand utiliser chaque unité est essentiel pour créer des designs responsive et maintenables. Ce guide présente les différentes unités disponibles, leurs cas d'usage et des exemples pratiques.

Pixels (px)

Les pixels sont des unités absolues, idéales pour des dimensions fixes et précises :

Aperçu
200px × 100px
Padding 20px, Margin 10px

Texte en 16px

Texte en 24px

<!-- Dimensions en pixels -->
<div class="w-[200px] h-[100px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    200px × 100px
</div>

<!-- Espacement en pixels -->
<div class="p-[20px] m-[10px] bg-[e0e0e0]">
    Padding 20px, Margin 10px
</div>

<!-- Taille de police en pixels -->
<p class="font-size-[16px] mb-[10px]">Texte en 16px</p>
<p class="font-size-[24px]">Texte en 24px</p>

Quand utiliser px

Aperçu
Bordure 2px
Ombre avec pixels 
<!-- Bordures (toujours en px) -->
<div class="border-[2px_solid_ccc] p-[20px] mb-[10px]">
    Bordure 2px
</div>

<!-- Ombres -->
<div class="shadow-[0_4px_8px_rgba(0,0,0,0.1)] p-[20px] bg-[fff]">
    Ombre avec pixels
</div>

<!-- Dimensions fixes d'éléments UI -->
<button class="w-[120px] h-[40px] bg-[0B63F3] c-[fff] rounded-[4px] border-[none]">
    Button 120px
</button>

Pourcentage (%)

Les pourcentages sont relatifs à l'élément parent, parfaits pour les layouts fluides :

Aperçu
25% de largeur
50% de largeur
75% de largeur
100% de largeur 
<!-- Largeurs en pourcentage -->
<div class="bg-[f5f5f5] p-[10px]">
    <div class="w-[25%] h-[60px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
        25% de largeur
    </div>
    <div class="w-[50%] h-[60px] bg-[8b5cf6] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
        50% de largeur
    </div>
    <div class="w-[75%] h-[60px] bg-[10b981] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
        75% de largeur
    </div>
    <div class="w-[100%] h-[60px] bg-[D41212] c-[fff] d-[flex] items-[center] justify-[center]">
        100% de largeur
    </div>
</div>

Grid avec pourcentages

Aperçu
33.33%
33.33%
33.33% 
<!-- Layout en colonnes -->
<div class="d-[flex] gap-[2%] bg-[f5f5f5] p-[10px]">
    <div class="w-[33.33%] h-[100px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
        33.33%
    </div>
    <div class="w-[33.33%] h-[100px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
        33.33%
    </div>
    <div class="w-[33.33%] h-[100px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
        33.33%
    </div>
</div>

Hauteur en pourcentage

Aperçu
50%
75%
100% 
<!-- Parent avec hauteur définie -->
<div class="h-[300px] bg-[f5f5f5] p-[10px] d-[flex] gap-[10px]">
    <div class="w-[100px] h-[50%] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
        50%
    </div>
    <div class="w-[100px] h-[75%] bg-[8b5cf6] c-[fff] d-[flex] items-[center] justify-[center]">
        75%
    </div>
    <div class="w-[100px] h-[100%] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center]">
        100%
    </div>
</div>

REM (Root EM)

REM est relatif à la taille de police de l'élément racine (html), excellent pour la scalabilité :

Aperçu
20rem × 5rem
Padding 2rem, Margin 1rem

Texte 1rem (base)

Texte 1.25rem

Texte 1.5rem

Texte 2rem

<!-- Dimensions en rem -->
<div class="w-[20rem] h-[5rem] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    20rem × 5rem
</div>

<!-- Espacements en rem -->
<div class="p-[2rem] m-[1rem] bg-[e0e0e0]">
    Padding 2rem, Margin 1rem
</div>

<!-- Tailles de police en rem (recommandé) -->
<p class="font-size-[1rem] mb-[10px]">Texte 1rem (base)</p>
<p class="font-size-[1.25rem] mb-[10px]">Texte 1.25rem</p>
<p class="font-size-[1.5rem] mb-[10px]">Texte 1.5rem</p>
<p class="font-size-[2rem]">Texte 2rem</p>

Système d'espacement cohérent en rem

Aperçu
Espacement 1rem
Espacement 1.5rem
Espacement 2rem 
<!-- Espacements cohérents -->
<div class="mb-[1rem] p-[1rem] bg-[f5f5f5] rounded-[0.5rem]">
    Espacement 1rem
</div>
<div class="mb-[1.5rem] p-[1.5rem] bg-[f5f5f5] rounded-[0.5rem]">
    Espacement 1.5rem
</div>
<div class="mb-[2rem] p-[2rem] bg-[f5f5f5] rounded-[0.5rem]">
    Espacement 2rem
</div>

Comparaison px vs rem

Aperçu

Titre 18px

Texte en pixels fixes

Titre 1.125rem

Texte en rem (scalable)

<div class="d-[flex] gap-[20px]">
    <!-- Pixels (ne scale pas)  -->
    <div class="w-[300px] bg-[e0e0e0] p-[20px]">
        <h4 class="font-size-[18px] m-[0] mb-[10px]">Titre 18px</h4>
        <p class="font-size-[14px] m-[0]">Texte en pixels fixes</p>
    </div>

    <!-- REM (scale avec la police root)  -->
    <div class="w-[20rem] bg-[e0e0e0] p-[1.25rem]">
        <h4 class="font-size-[1.125rem] m-[0] mb-[0.625rem]">Titre 1.125rem</h4>
        <p class="font-size-[0.875rem] m-[0]">Texte en rem (scalable)</p>
    </div>
</div>

EM

EM est relatif à la taille de police de l'élément parent, utile pour des espacements contextuels :

Aperçu

Parent: 20px

1em = 20px (même taille que parent)
1.5em = 30px (1.5 × 20px)
0.75em = 15px (0.75 × 20px) 
<!-- EM relatif au parent -->
<div class="font-size-[20px] bg-[f5f5f5] p-[20px]">
    <p class="font-size-[16px] mb-[10px]">Parent: 20px</p>

    <div class="font-size-[1em] mb-[10px]">
        1em = 20px (même taille que parent)
    </div>

    <div class="font-size-[1.5em] mb-[10px]">
        1.5em = 30px (1.5 × 20px)
    </div>

    <div class="font-size-[0.75em]">
        0.75em = 15px (0.75 × 20px)
    </div>
</div>

Espacement en em

Aperçu 
<!-- Padding proportionnel à la taille de police -->
<button class="font-size-[14px] p-[0.5em_1em] bg-[0B63F3] c-[fff] border-[none] rounded-[0.25em] mb-[10px]">
    Petit bouton (14px)
</button>

<button class="font-size-[16px] p-[0.5em_1em] bg-[0B63F3] c-[fff] border-[none] rounded-[0.25em] mb-[10px]">
    Bouton moyen (16px)
</button>

<button class="font-size-[20px] p-[0.5em_1em] bg-[0B63F3] c-[fff] border-[none] rounded-[0.25em]">
    Grand bouton (20px)
</button>

VW (Viewport Width)

Pourcentage de la largeur du viewport :

Aperçu
50vw (50% de l'écran)
75vw (75% de l'écran)
100vw (pleine largeur) 
<!-- Largeur relative au viewport -->
<div class="w-[50vw] h-[100px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    50vw (50% de l'écran)
</div>

<div class="w-[75vw] h-[100px] bg-[8b5cf6] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    75vw (75% de l'écran)
</div>

<div class="w-[100vw] h-[100px] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center]">
    100vw (pleine largeur)
</div>

VH (Viewport Height)

Pourcentage de la hauteur du viewport :

Aperçu
50vh (50% de hauteur d'écran)
100vh (pleine hauteur d'écran) 
<div class="w-[100%] h-[50vh] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    50vh (50% de hauteur d'écran)
</div>

<div class="w-[100%] h-[100vh] bg-[8b5cf6] c-[fff] d-[flex] items-[center] justify-[center]">
    100vh (pleine hauteur d'écran)
</div>

Hero section full-screen

Aperçu

Hero Section

100vw × 100vh

<!-- Section plein écran -->
<div class="w-[100vw] h-[100vh] bg-linear-[135deg,667eea_0%,764ba2_100%] c-[fff] d-[flex] flex-direction-[column] items-[center] justify-[center]">
    <h1 class="font-size-[4rem] m-[0] mb-[1rem]">Hero Section</h1>
    <p class="font-size-[1.5rem] m-[0]">100vw × 100vh</p>
</div>

Taille de police responsive avec vw

Aperçu

Titre responsive (5vw)

Texte qui s'adapte à la largeur de l'écran (2vw)

Titre avec base 1rem + 2vw 
<!-- Texte qui scale avec la largeur -->
<h1 class="font-size-[5vw] c-[333]">
    Titre responsive (5vw)
</h1>

<p class="font-size-[2vw] c-[666]">
    Texte qui s'adapte à la largeur de l'écran (2vw)
</p>

<!-- Avec limites min/max -->
<h2 class="font-size-[calc[1rem_+_2vw]] c-[333]">
    Titre avec base 1rem + 2vw
</h2>

VMIN et VMAX

Aperçu
50vmin (carré qui s'adapte)
30vmax 
<!-- VMIN : plus petite dimension du viewport -->
<div class="w-[50vmin] h-[50vmin] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center] mb-[10px]">
    50vmin (carré qui s'adapte)
</div>

<!-- VMAX : plus grande dimension du viewport -->
<div class="w-[30vmax] h-[100px] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center]">
    30vmax
</div>

Notation des décimales

En Marssel, utilisez le . pour les valeurs décimales.

Aperçu
opacity-[0.5] = 0.5
w-[12.5rem] = 12.5rem

font-size-[1.25rem] line-h-[1.6]

transform-[scale(1.1)] = scale(1.1) 
<div class="opacity-[0.5] bg-[000] c-[fff] p-[20px] mb-[10px]">
    opacity-[0.5] = 0.5
</div>

<div class="w-[12.5rem] h-[60px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center] mb-[10px]">
    w-[12.5rem] = 12.5rem
</div>

<p class="font-size-[1.25rem] line-h-[1.6]">
    font-size-[1.25rem] line-h-[1.6]
</p>

<div class="transform-[scale(1.1)] bg-[e0e0e0] p-[20px]">
    transform-[scale(1.1)] = scale(1.1)
</div>
← Précédent Syntaxe
Suivant → Responsive Design

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).