CSS има няколко различни единици за изразяване на дължина.
Много свойства на CSS вземат стойности „дължина“, като ширина, марж, подложка, размер на шрифта, ширина на границата и т.н.
Дължината е число, последвано от единица дължина, като 10px, 2em и т.н.
Нечетно пространство не може да се появи между номера и устройството. Ако обаче стойността е 0, единицата може да бъде пропусната.
За някои CSS свойства са разрешени отрицателни дължини.
Има два типа единици дължини: относителни и абсолютни.
Поддръжка от браузърите
Номерата в таблицата уточняват първата версия на браузъра, която напълно поддържа единицата за дължина.
| Дължина на единица | |||||
|---|---|---|---|---|---|
| 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 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Not supported | 19.0 | 7.0 | 20.0 |
Забележка: Internet Explorer 9 поддържа vmin с нестандартното име: vm.
Относителни Lengths
Relative length units specify a length relative to another length property.
Relative length units scales better between different rendering mediums.
| Единица | Описание |
|---|---|
| em | Относно размера на шрифта на елемента (2em означава 2 пъти размера на текущия шрифт) Опитайте |
| ex | Относно x-височината на текущия шрифт (рядко се използва) Опитайте |
| ch | Относно ширината на „0“ (нула) |
| rem | Относно размера на шрифта на коренния елемент |
| vw | Относно 1% от ширината на визуалния прозорец * Опитайте |
| vh | Относно 1% от височината на екранния прозорец * Опитайте |
| vmin | Относно 1% от размера на прозореца * по-малък Опитайте |
| vmax | Относно 1% от по-голямото измерение на прозореца * Опитайте |
| % |
Съвет: Устройствата за em и rem са практични за създаването на перфектно мащабируемо оформление!
* Viewport = размера на прозореца на браузъра. Ако прозорецът за изгледи е широк 50 см, 1vw = 0.5см.
Абсолютни дължини
Елементите с абсолютна дължина са фиксирани и дължина, изразена в която и да е от тях, ще изглежда точно като този размер.
Апаратите с абсолютна дължина не се препоръчват за използване на екрана, тъй като размерите се различават толкова много. Те обаче могат да се използват, ако изходният носител е известен, например за оформление за печат.
| Единица | Описание |
|---|---|
| cm | сантиметри Опитайте |
| mm | милиметри Опитайте |
| in | инчове (1in = 96px = 2.54cm) Опитайте |
| px * | пиксели (1px = 1/96th of 1in) Опитайте |
| pt | точки (1pt = 1/72 of 1in) Опитайте |
| pc | picas (1pc = 12 pt) Опитайте |
* Пикселите (px) са относителни към зрителното устройство. За устройства с ниска разделителна способност 1px е едно пикселно устройство (точка) на дисплея. За принтери и екрани с висока разделителна способност 1px предполага множество пиксели на устройства.