Усі одиниці CSS: абсолютні, відносні до шрифту, відносні до в'юпорту, функції плинних значень, а також одиниці кута, часу та роздільності — щодо чого вимірюється кожна і коли її варто обирати.
Абсолютні одиниці (px, pt) зберігають фіксований розмір незалежно від контексту; відносні одиниці (rem, vw, %) масштабуються відносно опорного значення. Для розмірів шрифту обирайте rem: він враховує налаштований користувачем кореневий розмір шрифту, тож ваша типографіка поважає його налаштування доступності. Використовуйте clamp() для плинної типографіки, яка зростає й стискається разом із в'юпортом, ніколи не виходячи за нижню або верхню межу.
Довідкова таблиця · 38 записи
Одиниці CSSExplained
38 of 38 rows
Абсолютні
1/96 дюйма (опорний піксель CSS).
Фіксовані розміри інтерфейсу: межі, тонкі лінії, розміри піктограм.
border: 1px solid #000;
1/72 дюйма (1pt = 1.333px).
Стилі для друку, де розміри відповідають фізичному паперу.
font-size: 12pt;
1 сантиметр (≈37.8px).
Друковані макети, яким потрібні реальні вимірювання.
margin: 2cm;
1 міліметр (≈3.78px).
Точні друковані вимірювання.
padding: 5mm;
1 дюйм (96px = 2.54cm).
Друковані макети з розмірами в дюймах.
margin: 1in;
Відносні до шрифту
Власний розмір шрифту елемента (успадкований від батьківського).
Відступи, що масштабуються разом із навколишнім текстом.
padding: 1em;
Розмір шрифту кореневого елемента (елемент html).
Розміри шрифту: враховує налаштування кореневого розміру шрифту користувача.
font-size: 1.25rem;
Ширина напередування глифа '0' у поточному шрифті.
Задати читабельну довжину рядка (символів на рядок).
max-width: 70ch;
Висота x поточного шрифту (висота малої літери 'x').
Вертикальні метрики, прив'язані до шрифту.
line-height: 2ex;
Висота великих літер поточного шрифту (висота прописної літери).
Вертикальні метрики за висотою великих літер, щільніші за ex.
padding-top: 0.5cap;
Ширина напередування ідеограми '水' (вода) у поточному шрифті.
Розміри, що відстежують одну клітинку CJK-символа.
width: 4ic;
Власна обчислена міжрядкова висота елемента.
Розмірювати елементи цілими рядками тексту.
height: 3lh;
Міжрядкова висота кореневого елемента.
Відступи, кратні базовій міжрядковій висоті документа.
margin-block: 2rlh;
Відносні до в'юпорту
Значення тієї самої властивості батьківського елемента.
Плинні макети, розмірені за елементом-контейнером.
width: 50%;
1% ширини в'юпорту.
Смуги на всю ширину, розмірені за шириною екрана.
width: 100vw;
1% висоти в'юпорту.
Hero-секції або накладки на всю висоту екрана.
height: 100vh;
1% меншого виміру в'юпорту.
Розмірювати елементи так, щоб вони вписувалися в екран у будь-якій орієнтації.
font-size: 5vmin;
1% більшого виміру в'юпорту.
Заповнити домінантну вісь в'юпорту.
font-size: 5vmax;
1% малої висоти в'юпорту (інтерфейс браузера повністю показано).
Мобільні секції на всю висоту, що вміщуються над розгорнутими панелями браузера.
height: 100svh;
1% великої висоти в'юпорту (інтерфейс браузера приховано).
Підкладки, які мають закривати екран, навіть коли панелі браузера згортаються.
height: 100lvh;
1% динамічної висоти в'юпорту; відстежує інтерфейс браузера під час показу й приховування.
Мобільне виправлення для 100vh: висота змінюється, коли з'являються панелі браузера.
height: 100dvh;
1% малої ширини в'юпорту.
Ширина-відповідник svh для найвужчого стану в'юпорту.
width: 100svw;
1% великої ширини в'юпорту.
Ширина-відповідник lvh для найширшого стану в'юпорту.