Размер
Оновлено: 16.01.2023
Розмір
Для завдання розмірів різних елементів у CSS використовуються абсолютні та відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.
Відносні одиниці
Відносні одиниці зазвичай використовують для роботи з текстом. У табл. 1 перелічено основні відносні одиниці.
Табл. 1. Відносні одиниці вимірювання
| Одиниця | Опис |
|---|---|
| em | Розмір шрифту поточного елемента |
| ex | Висота символу x |
| ch | Ширина символу 0 поточного елемента |
| rem | Розмір шрифту кореневого елемента |
Одиниця em це змінне значення, яке залежить від розміру шрифту поточного елемента (розмір встановлюється через стильову властивість font-size). У кожному браузері закладений розмір тексту, що застосовується в тому випадку, коли цей розмір явно не задано. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням або розміру шрифту батьківського елемента. Процентний запис ідентичний em, у тому сенсі, що значення 1em і 100% рівні.
Одиниця ex визначається як висота символу "x" у нижньому регістрі. На ex поширюються ті самі правила, що й для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елемента.
Одиниця ch дорівнює ширині символу "0" для поточного елемента і подібно em залежить від розміру шрифту.
Різниця між em і rem така: em залежить від розміру шрифту батька елемента і змінюється разом із ним, а rem прив'язаний до кореневого елемента, тобто розміру шрифту, заданого для елемента html.
Також є група відносних одиниць, прив'язаних до розміру області перегляду браузера. У табл. 2 показано їхній список з описом.
Табл. 2. Відносні одиниці вимірювання
| Единица | Описание |
|---|---|
| vw | 1% від ширини області перегляду |
| vh | 1% від висоти області перегляду |
| vmin | 1% від меншого значення з ширини і висоти області перегляду |
| vmax | Визначається, що більше, значення ширини або висоти області перегляду і від нього обчислюється 1% |
Абсолютні одиниці
Абсолютні одиниці являють собою фізичні розміри - дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. Для пристроїв із низьким dpi (кількість точок, що припадають на один дюйм, визначає щільність точок) прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пікселям. Очевидно, що реальний дюйм не буде збігатися з дюймом на такому пристрої. На пристроях із високим dpi реальний дюйм збігається з дюймом на екрані, тому розмір пікселя обчислюється як 1/96 від дюйма. У табл. 3 перелічено основні абсолютні одиниці.
Табл. 3. Абсолютні одиниці вимірювання
| Одиниця | Опис |
|---|---|
| px | Піксель |
| in | Дюйм (1 дюйм равен 2,54 см) |
| cm | Сантиметр |
| mm | Міліметр |
| pt | Пункт (1 пункт дорівнює 1/72 дюйма) |
| pc | Піка (1 піка дорівнює 12 пунктам) |
Приклад
Примітка
Під час встановлення розмірів обов'язково вказуйте одиниці виміру, наприклад width: 30px. В іншому разі браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібен. Одиниці не додаються тільки при нульовому значенні (margin: 0).
Internet Explorer підтримує одиницю vm замість vmin.