В CSS есть несколько различных единиц изменения для размеров, отступов и др. свойств, таких как: width, height, margin, padding, border-width, font-size и другие.
Как задается единица измерения? Сначала идет число, сразу за ним единица измерения, например 20px, 2.5em и другие.
- Между числом и единицей измерения не должно быть пробелов.
- У 0 можно единицы измерения опустить.
- Для некоторых свойств допустимы отрицательные значения
Единицы измерения бывают Абсолютные и Относительные.
Абсолютные
Имеют фиксированный, физический размер, который зависит от устройства. Применяются часто в структуре сайта, когда необходимо задать фиксированные размеры области сайта, отступов.
Не желательно использовать для размера текста font-size, вместо этого используют относительные единицы.
| Значение | Описание |
|---|---|
| px | Пиксели. Для устройств с большей плотностью пикселей, количество пикселей будет больше. Например, на ретина-экране вместо рамки в 1px, на самом деле будет 2px. (1px = 1in/96) |
| cm | Сантиметры (1cm = 96px/2.54) |
| mm | Миллиметры (1mm = 1cm/10) |
| in | Дюймы (1in = 96px = 2.54cm) |
| pt | Пункты (1pt = 1in/72) |
| pc | Пайки/пики (англ. pica) (1pc = 12 pt) |
Относительные
Зависят от размера другого элемента, например от размера шрифта, области просмотра.
Проценты
Напрямую не относится к размерам, не ко всем свойствам можно применить. Но для полноты картины приведены здесь.
| Значение | Описание |
|---|---|
| % | Размер в процентах от родительского элемента. Например, 10%.Не ко всем свойствам можно применить. |
Относительно размера текста
| Значение | Описание |
|---|---|
| em | Размер шрифта элемента. 1.5em значит полтора размера от текущего размера шрифта элемента. |
| rem | Размер шрифта корневого элемента <html>, по умолчанию в браузерах 16px. Не зависит от размера шрифта родительского блока. |
| ex | Высота символа x в нижнем регистре. Используется редко. |
| ch | Ширина символа 0 (ноль). Используется редко. |
Относительно экрана
| Значение | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от ширины или высоты области просмотра, выбирается меньшее значение |
| vmax | 1% от ширины или высоты области просмотра, выбирается бо́льшее значение |
