Fundamenty Przestrzeń
Fundamenty
Przestrzeń
Jedna skala oparta na kroku 4 px (--spacing: 0.25rem). Wszystkie odstępy – padding, margin, gap – są jej wielokrotnością, więc układ ma spójny rytm. Krok n odpowiada n × 4 px.
Skala odstępów
Najczęściej używane kroki. Pasek pokazuje realną szerokość tokena.
0.5 0.125rem · 2px 1 0.25rem · 4px 1.5 0.375rem · 6px 2 0.5rem · 8px 2.5 0.625rem · 10px 3 0.75rem · 12px 4 1rem · 16px 5 1.25rem · 20px 6 1.5rem · 24px 8 2rem · 32px 10 2.5rem · 40px 12 3rem · 48px 16 4rem · 64px 20 5rem · 80px 24 6rem · 96px html
<!-- Krok = n × 4 px -->
<div class="p-6">padding 24 px</div>
<div class="mt-4">margin-top 16 px</div>
<div class="flex gap-6">odstęp 24 px</div>
<div class="space-y-20">rytm między blokami</div>Rytm pionowy
Konwencje odstępów powtarzane na całym serwisie – trzymaj się ich zamiast dobierać wartości ad hoc.
| Klasa | Zastosowanie |
|---|---|
| py-16 / py-24 | Pionowy padding sekcji (64 / 96 px) |
| space-y-20 | Odstęp między blokami na stronie |
| gap-6 | Odstęp w siatkach kart (24 px) |
| gap-4 | Odstęp w siatkach drobnych (16 px) |
| mt-3 / mt-4 | Tekst pod nagłówkiem (12 / 16 px) |
| gutter | Stały margines boczny strony (patrz: Układ) |
Padding w praktyce
Jak rośnie wewnętrzny oddech kart i boksów.
p-4
p-6
p-8