Common CSS (Spacing & Position Utilities)

FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.

Demo: This element has class fixed-top. It is fixed at the top of the viewport.

Demo: This element has class fixed-bottom. It is fixed at the bottom of the viewport.

Design Token: The base spacing step is 4px (defined as --spacing-step). For example, a level 5 spacing represents 20px (5 × 4px).

Visual Spacing Playground

Use the controls below to dynamically adjust the margin and padding levels on the sample element, simulating how the CSS spacing scales look in practice.

Margin Level (m-0 to m-10)

m-4 (16px)

Padding Level (p-0 to p-10)

p-5 (20px)

Target Element Content

Outer Margin Area (Orange) Inner Padding Area (Green)

Classes Reference

All spacing classes use the format [property][direction]-[level]. The following values are supported:

Properties	Directions	Levels (1 to 10)
Margin: `m-` Padding: `p-`	(None) - All sides t - Top r - Right b - Bottom l - Left	1: 4px \| 2: 8px \| 3: 12px 4: 16px \| 5: 20px \| 6: 24px 7: 28px \| 8: 32px \| 9: 36px 10: 40px

Static HTML Usage Example

<!-- Card component with margin bottom level 6 (24px) and padding level 4 (16px) -->
<div class="card mb-6 p-4">
    <div class="card-header">Spacing Utilities</div>
    <div class="card-content">
        <button class="btn primary mt-3 mr-2">Submit</button>
        <button class="btn secondary mt-3">Cancel</button>
    </div>
</div>