Długość to liczba, po której następuje jednostka długości, taka jak 10px, 2em itp.
Pomiędzy liczbą a jednostką nie może pojawić się biała spacja. Jeśli jednak wartość wynosi 0, jednostkę można pominąć.
W przypadku niektórych właściwości CSS dozwolone są długości ujemne.
Istnieją dwa rodzaje jednostek długości: bezwzględna i względna.
Jednostki długości bezwzględnej są stałe i wyświetlane mają dokładny rozmiar.
Jednostki bezwzględnej długości nie są zalecane do używania na ekranie, ponieważ rozmiary ekranów są bardzo różne. Można ich jednak użyć, jeśli znany jest nośnik wyjściowy, na przykład układ wydruku.
| Jednostka | Opis | Przykład |
|---|---|---|
| cm | centymetr | |
| mm | milimetr | |
| in | cal | 1in = 96px = 2.54cm |
| px * | pixel | 1px = 1/96 cala. W przypadku drukarek i ekranów o wysokiej rozdzielczości 1px oznacza wiele pikseli urządzenia. |
| pt | punkt | 1pt = 1/72 cala |
| pc | pica (wym. "pajka") | 1pc = 12 pt = 1/6 cala |
Jednostki długości względnej określają długość względem innej długości. Między różnymi środkami renderującymi lepiej się skalują.
Jednostki 'em' i 'rem' są praktyczne w tworzeniu idealnie skalowalnego układu. *
Rzutnia = rozmiar okna przeglądarki. Jeśli rzutnia ma szerokość 50 cm, 1vw = 0,5 cm.
| Jednostka | Opis | Przykład |
|---|---|---|
| em | Stosunkowo do rozmiaru czcionki elementu | 2em oznacza 2-krotność rozmiaru bieżącej czcionki |
| rem | Względem wielkości czcionki elementu głównego | Jednostka rem ustawia rozmiar czcionki w stosunku do podstawowego rozmiaru czcionki w przeglądarce. |
| ex | Względem wysokości x bieżącej czcionki (rzadko używane) | |
| ch | W stosunku do szerokości „0” (zero) | |
| vw | W stosunku do 1% szerokości rzutni * | |
| vh | W odniesieniu do 1% wysokości rzutni * | |
| vmin | W stosunku do 1% * mniejszego wymiaru rzutni | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Względem elementu nadrzędnego |
| Jednostka | Opis | Przykład |
|---|---|---|
| deg | stopień | Kąt pełny: 360deg = 400grad = 2πrad = 1turn |
| grad | gradus | |
| rad | radian | |
| turn | obrót | |
| s | sekunda | 1s = 1000ms |
| ms | milisekunda | 1ms = 0.001s |