CSS Длины
CSS Единицы длины
В CSS есть несколько различных единиц измерения длины.
Многие свойства CSS имеют значение "Длины", такие как width, margin,padding, font-size и т.д.
Единица длины – это число, за которым следует единица длины, например 10px, 2em и т.д.
Пример
Установите разные значения длины, используя px (пиксели):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Примечание. Между числом и единицей измерения не должно быть пробела. Однако если значение равно 0, единицу измерения можно не указывать.
Для некоторых свойств CSS допускается отрицательная длина.
Есть два типа единиц измерения длины: абсолютные и относительные.
Абсолютная длина
Единицы абсолютной длины фиксированы, и длина, выраженная в любой из них, будет отображаться точно как этот размер.
Единицы абсолютной длины не рекомендуется использовать на экране, так как размеры экрана сильно различаются. Однако их можно использовать, если известен носитель вывода, например для макета печати.
| Единица длины | Описание |
|---|---|
| cm | сантиметры Попробуй |
| mm | миллиметры Попробуй |
| in | дюймы (1in = 96px = 2.54cm) Попробуй |
| px * | пиксели (1px = 1/96th of 1in) Попробуй |
| pt | точки (1pt = 1/72 of 1in) Попробуй |
| pc | пикас (1pc = 12 pt) Попробуй |
* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и экранов с высоким разрешением 1 пиксель означает несколько пикселей устройства.
Относительная длина
Относительные единицы длины задают длину относительно другого свойства длины. Единицы относительной длины лучше масштабируются между разными средами визуализации.
| Единица длины | Описание | |
|---|---|---|
| em | Относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта) | Попробуй |
| ex | Относительно x-высоты текущего шрифта (используется редко) | Попробуй |
| ch | Относительно ширины "0" (нуль) | Попробуй |
| rem | Относительно размера шрифта корневого элемента | Попробуй |
| vw | Относительно 1% ширины окна просмотра* | Попробуй |
| vh | Относительно 1% высоты окна просмотра* | Попробуй |
| vmin | Относительно 1 % меньшего размера области просмотра* | Попробуй |
| vmax | Относительно 1 % большего размера области просмотра* | Попробуй |
| % | Относительно родительского элемента | Попробуй |
Совет: Единицы em и rem удобны для создания отлично масштабируемого макета!
* Viewport = размер окна браузера. Если окно просмотра имеет ширину 50cm, 1vw = 0,5cm.
Поддержка браузера
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает единицу измерения длины.
| Единица длины | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |