Одиниці довжини в CSS — px, em, rem і відсотки

CSS має кілька різних одиниць для вираження довжини.

Багато властивостей CSS приймають значення "довжини", такі як width, margin, padding, font-size, border-width тощо.

Довжина - це число, за яким слідує одиниця довжини, наприклад 10px, 2em та ін.

Пробіл не відображається між значенням та одиницею виміру. Однак, якщо значення дорівнює 0, одиниця виміру може бути опущена. Для деяких властивостей CSS дозволені негативні довжини.

Є два типи одиниць довжини: абсолютна і відносна.

Абсолютні довжини

Абсолютні одиниці представляють собою фізичні розміри - дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. У таблиці перераховані основні відносні одиниці.

Для пристроїв з низьким dpi (кількість точок, що припадають на один дюйм, визначає щільність точок) прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пікселям. Очевидно, що реальний дюйм не співпадатиме з дюймом на такому пристрої. На пристроях з високим dpi реальний дюйм збігається з дюймом на екрані, тому розмір пікселя обчислюється як 1/96 від дюйма.

Відносні довжини

Відносні одиниці довжини вказують довжину щодо властивості іншої довжини. Відносна одиниця довжини збільшується між різними середовищами візуалізації.

Відносні одиниці зазвичай використовують для роботи з текстом.

Одиниця em - це змінне значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильову властивість font-size). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням або розміром шрифту батьківського елементу. Відсотковий запис ідентичний em, в тому сенсі, що значення 1em і 100% рівні.

Одиниця ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елементу.

Одиниця ch дорівнює ширині символу «0» для поточного елемента і подібно em залежить від розміру шрифту.

Різниця між em і rem наступна: em залежить від розміру шрифту батька елемента і змінюється разом з ним, а rem прив'язаний до кореневого елементу, тобто розміру шрифта заданого для елемента html.

правити

Загальний опис

правити

Порада

При установці розмірів обов'язково вказуйте одиниці виміру, наприклад width: 30px. В іншому випадку браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібно. Одиниці не додаються тільки при нульовому значенні (margin: 0).

автор: Svitlana правити

Нотатка

Internet Explorer підтримує одиницю vm замість vmin.

автор: Svitlana правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
px, in, cm, mm, pt, pc, em, ex	1.0	1.0	1.0	3.5	12.0	3.0
ch	27.0	1.0	7.0	20.0	12.0	9.0
rem	4.0	3.6	4.1	11.6	12.0	9.0
vw, vh	20.0	19.0	6.0	20.0	12.0	9.0
vmax	26.0	19.0	6.1	15.0	16.0	не підтримується
vmin	20.0	19.0	6.0	15.0	12.0	9.0

Підтримка: мобільні переглядачі

Переглядач
px, in, cm, mm, pt, pc, em, ex	властивість повністю підтримується браузером з усіма допустимими значеннями	властивість повністю підтримується браузером з усіма допустимими значеннями	властивість повністю підтримується браузером з усіма допустимими значеннями
ch	4.4	2.0	71.1
rem	2.1	2.0	4.0
vw, vh	2.1	19.0	6.0
vmax	4.4	19.0	6.1
vmin	2.1	19.0	6.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="px">50px — пікселі</p>
<p class="cm">1.5cm — сантиметри</p>
<p class="mm">15mm — міліметри</p>
<p class="rem">3rem — кратно кореневому шрифту</p>

.px  { font-size: 50px; }
.cm  { font-size: 1.5cm; }
.mm  { font-size: 15mm; }
.rem { font-size: 3rem; }

<div class="cols">
    <ul class="em">
        <li>font-size: 1.3em
            <ul><li>другий рівень
                <ul><li>третій рівень</li></ul>
            </li></ul>
        </li>
    </ul>

    <ul class="rem">
        <li>font-size: 1.3rem
            <ul><li>другий рівень
                <ul><li>третій рівень</li></ul>
            </li></ul>
        </li>
    </ul>
</div>

<div class="wrap narrow"><div class="pct">padding: 10% у коробці 160px</div></div>
<div class="wrap wide"><div class="pct">padding: 10% у коробці 320px</div></div>

body {
    font-family: system-ui, sans-serif;
    font-size: 16px;
}

.cols {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.cols ul {
    flex: 1;
    margin: 0;
    padding: 10px 10px 10px 28px;
    border: 2px solid #ccc;
}

/* накопичується: 1.3 → 1.69 → 2.2 від кореневого розміру */
ul.em li { font-size: 1.3em; }

/* стале: 1.3 від шрифту кореневого елемента на всіх рівнях */
ul.rem li { font-size: 1.3rem; }

.wrap {
    border: 2px solid #0172ad;
    margin-bottom: 12px;
}

.narrow { width: 160px; }
.wide   { width: 320px; }

.pct {
    padding: 10%;        /* усі чотири боки — від ШИРИНИ батька */
    background: #eef6fb;
}

<h1>Перший заголовок</h1>
<h2>Другий заголовок</h2>
<p>Перший параграф</p>
<p>Інший параграф</p>

h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
    font-size: 1.5pc;
    line-height: 3pc;
}