Існує багато властивостей CSS, які вимагають розмір в якості одиниці:
- font-size визначає розмір тексту;
- border-width визначає товщину кордонів елементів;
- margin визначає простір між елементами;
- left / right / top / bottom дозволяють позиціонувати і переміщати елементи.
Найбільш часто використовувані одиниці:
- px для пікселів;
- % Для відсотків;
- em для визначення розміру щодо батьківського значення font-size.
Оскільки комп'ютерні екрани використовують пікселі для відображення вмісту, це найпоширеніша одиниця розміру в CSS.
Піксель може бути використаний для завдання фіксованої ширини елемента:
Або встановити розмір тексту:
Пікселі в CSS є простими, оскільки вони визначають абсолютні значення і не залежать від інших успадкованих властивостей CSS.
Вони також широко використовуються для позиціонування і відстані.
Відсотки - це відносні одиниці. вони покладаються на батьків і / або предка елемента.
Наприклад, блокові елементи, такі як абзаци, природним чином займають всю доступну ширину. Наступне правило CSS змінить їх розмір до половини доступною ширини.
Відсотки можуть допомогти поставити інші властивості CSS, такі як розмір тексту.
em є відносною одиницею і залежить від значення font-size елемента.
Наприклад, якщо у батька font-size заданий як 20px і ви застосовуєте font-size: 0.8em до дочірньому елементу, то цей дочірній елемент буде відображати font-size як 16px.
Не слід плутати розмір em з селектором em. який орієнтований на елемент .
Одиниця em цікава для визначення розміру шрифту елементів HTML відносно один одного. Для створення привабливого і комфортною для читання веб-сторінки вам необхідно забезпечити візуальну глибину. Наприклад, ви хочете, щоб ваші
були вдвічі більше, ніж основний текст, ваші в 1,5 рази більше, а бічна панель трохи менше. Це можна легко отримати в CSS:
Якщо ви вирішите змінити розмір тексту
. відносні розміри заголовків і бічній панелі зміняться відповідно і ваша веб-сторінка залишиться візуально збалансованою.Тільки змінивши одне значення, поміняються і всі інші значення:
Одиниця rem схожа на em, але замість залежності від батьківського значення, вона спирається на значення кореневого елемента. яким є елемент .
Різниця між rem і em в тому, що значення rem фіксоване, в той час як значення em множаться один з одним.
Якщо ви встановили html
- 2rem завжди дорівнюватиме 36px, незалежно від того, де воно використовується в вашому CSS;
- 2em завжди дорівнюватиме подвоєному font-size батька, що не обов'язково одно 36px.
Швидкий приклад, де 2em відрізняється від 2rem:
покладається на значення font-size у <р>. в той час як покладається на значення font-size у .
Яку одиницю використовувати?
Я б рекомендував почати з пікселів. оскільки це абсолютна величина, вони не залежать від контексту елемента. Пікселі прості, дозволяють встановити розмір тексту, ширину і висоту зображення, товщину кордону, координати положення та ін.
Відсотки і значення em можуть бути використані поряд з пікселями, особливо для відносних розмірів тексту.