Генератор шкали відступів
Генератор шкали відступів будує систему відступів на основі одиниці 4, 5, 6 або 8 px у 12, 16 чи 20 кроків і експортує її як користувацькі властивості CSS у px або rem.
Про цей інструмент
Генератор шкали відступів будує систему відступів на основі одиниці 4, 5, 6 або 8 px у 12, 16 чи 20 кроків і експортує її як користувацькі властивості CSS у px або rem.
Як користуватися
- Оберіть базову одиницю, наприклад 4 px або 8 px.
- Виберіть виведення в px або rem.
- Вкажіть потрібну кількість кроків.
- Натисніть «Копіювати CSS-змінні», щоб додати шкалу у свою таблицю стилів.
Корисно знати
- Відступи в Tailwind CSS засновані на одиниці 4 px (0.25 rem).
- Material Design використовує сітку 8 dp, а для дрібних коригувань — 4 dp.
- Кратні значення, як-от 0.5, 1, 1.5, 2, 3, 4, 6 і 8, покривають більшість потреб у відступах.
- Значення rem тут розраховано з кореневим розміром шрифту 16 px.
- Фіксована шкала замінює довільні піксельні значення й підтримує візуальну узгодженість макетів.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Яку систему відступів обрати — 4px чи 8px?
8 px — поширений стандарт для макетів; 4 px дає точніший контроль для щільних інтерфейсів і дрібних компонентів. Багато команд використовують кроки по 4 px у межах 8-піксельного ритму.
Що таке шкала відступів у дизайн-системах?
Це наперед визначений набір значень для margin, padding і gap, завдяки якому на кожному екрані використовуються однакові кроки.
Як використати шкалу в CSS?
Скопіюйте змінні й використовуйте їх так: padding: var(--space-4); — тоді відступи будуть однаковими в усіх компонентах.
Чи збігається це з відступами Tailwind?
З базою 4 px і виведенням у rem значення відповідають тим самим кратним, що й стандартна шкала відступів Tailwind.