FR | EN
Install
Documentation

Documentation - Units.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Units

Marssel supports all standard CSS units to define dimensions, spacing, font sizes and other properties. Understanding when to use each unit is essential to creating responsive and maintainable designs. This guide presents the different units available, their use cases and practical examples.

Pixels (px)

Pixels are absolute units, ideal for fixed and precise dimensions:

Preview
200px × 100px
Padding 20px, Margin 10px

Text in 16px

Text in 24px

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

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

<!-- Font size in pixels -->
<p class="font-size-[16px] mb-[10px]">Text in 16px</p>
<p class="font-size-[24px]">Text in 24px</p>

When to use px

Preview
2px border
Shadow with pixels 
<!-- Borders (always in px) -->
<div class="border-[2px_solid_ccc] p-[20px] mb-[10px]">
    2px border
</div>

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

<!-- Fixed dimensions of UI elements -->
<button class="w-[120px] h-[40px] bg-[0B63F3] c-[fff] rounded-[4px] border-[none]">
    Button 120px
</button>

Percentage (%)

Percentages are relative to the parent element, perfect for fluid layouts:

Preview
25% width
50% width
75% width
100% width 
<!-- Widths in percentage -->
<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% width
    </div>
    <div class="w-[50%] h-[60px] bg-[8b5cf6] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
        50% width
    </div>
    <div class="w-[75%] h-[60px] bg-[10b981] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
        75% width
    </div>
    <div class="w-[100%] h-[60px] bg-[D41212] c-[fff] d-[flex] items-[center] justify-[center]">
        100% width
    </div>
</div>

Grid with percentages

Preview
33.33%
33.33%
33.33% 
<!-- Column layout -->
<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>

Height in percentage

Preview
50%
75%
100% 
<!-- Parent with defined height -->
<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 is relative to the font size of the root element (html), excellent for scalability:

Preview
20rem × 5rem
Padding 2rem, Margin 1rem

Text 1rem (basic)

Text 1.25rem

Text 1.5rem

Text 2rem

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

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

<!-- Font sizes in rem (recommended) -->
<p class="font-size-[1rem] mb-[10px]">Text 1rem (basic)</p>
<p class="font-size-[1.25rem] mb-[10px]">Text 1.25rem</p>
<p class="font-size-[1.5rem] mb-[10px]">Text 1.5rem</p>
<p class="font-size-[2rem]">Text 2rem</p>

Consistent spacing system in rem

Preview
Spacing 1rem
Spacing 1.5rem
Spacing 2rem 
<!-- Consistent spacing -->
<div class="mb-[1rem] p-[1rem] bg-[f5f5f5] rounded-[0.5rem]">
    Spacing 1rem
</div>
<div class="mb-[1.5rem] p-[1.5rem] bg-[f5f5f5] rounded-[0.5rem]">
    Spacing 1.5rem
</div>
<div class="mb-[2rem] p-[2rem] bg-[f5f5f5] rounded-[0.5rem]">
    Spacing 2rem
</div>

Comparison px vs rem

Preview

Title 18px

Text in fixed pixels

Title 1.125rem

Text in rem (scalable)

<div class="d-[flex] gap-[20px]">
    <!-- Pixels (do not scale) -->
    <div class="w-[300px] bg-[e0e0e0] p-[20px]">
        <h4 class="font-size-[18px] m-[0] mb-[10px]">Title 18px</h4>
        <p class="font-size-[14px] m-[0]">Text in fixed pixels</p>
    </div>

    <!-- REM (scale with root font) -->
    <div class="w-[20rem] bg-[e0e0e0] p-[1.25rem]">
        <h4 class="font-size-[1.125rem] m-[0] mb-[0.625rem]">Title 1.125rem</h4>
        <p class="font-size-[0.875rem] m-[0]">Text in rem (scalable)</p>
    </div>
</div>

EM

EM is relative to the font size of the parent element, useful for contextual spacing:

Preview

Parent: 20px

1em = 20px (same size as parent)
1.5em = 30px (1.5 × 20px)
0.75em = 15px (0.75 × 20px) 
<!-- EM related to 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 (same size as 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>

Spacing in em

Preview 
<!-- Padding proportional to font size -->
<button class="font-size-[14px] p-[0.5em_1em] bg-[0B63F3] c-[fff] border-[none] rounded-[0.25em] mb-[10px]">
    Small button (14px)
</button>

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

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

VW (Viewport Width)

Percentage of viewport width:

Preview
50vw (50% of the screen)
75vw (75% of screen)
100vw (full width) 
<!-- Width relative to viewport -->
<div class="w-[50vw] h-[100px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    50vw (50% of the screen)
</div>

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

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

VH (Viewport Height)

Percentage of viewport height:

Preview
50vh (50% screen height)
100vh (full screen height) 
<div class="w-[100%] h-[50vh] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
    50vh (50% screen height)
</div>

<div class="w-[100%] h-[100vh] bg-[8b5cf6] c-[fff] d-[flex] items-[center] justify-[center]">
    100vh (full screen height)
</div>

Hero section full-screen

Preview

Hero Section

100vw × 100vh

<!-- Full screen section -->
<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>

Responsive font size with vw

Preview

Responsive title (5vw)

Text that fits the screen width (2vw)

Title with base 1rem + 2vw 
<!-- Text that scales with width -->
<h1 class="font-size-[5vw] c-[333]">
    Responsive title (5vw)
</h1>

<p class="font-size-[2vw] c-[666]">
    Text that fits the screen width (2vw)
</p>

<!-- With min/max limits -->
<h2 class="font-size-[calc[1rem_+_2vw]] c-[333]">
    Title with base 1rem + 2vw
</h2>

VMIN and VMAX

Preview
50vmin (square that fits)
30vmax 
<!-- VMIN: smallest dimension of the viewport -->
<div class="w-[50vmin] h-[50vmin] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center] mb-[10px]">
    50vmin (square that fits)
</div>

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

Decimal notation

In Marssel, use . for decimal values.

Preview
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>
← Previous Syntax
Next → Responsive Design

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).