CSS Единици

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 предполага множество пиксели на устройства.