В 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% от ширины или высоты области просмотра, выбирается бо́льшее значение |