W poniższym temacie omówimy sposób zapisu oraz możliwe do wykorzystania jednostki służące do określenia długości – zarówno względnej, jak i bezwzględnej.

Jednostki długości

Ekran monitora mierzymy rozpoczynając pomiar od lewego górnego rogu. Szerokość będzie miarą kierowaną w praco, wysokość w dół. W podobny sposób będziemy dokonywali przesunięć obiektów.

Sposób zapisu przedstawię na prostym przykładzie:

left: 20 px;

Jest to błędny zapis ze względu na spację pomiędzy liczbą, a jednostką. Zapis prawidłowy będzie wyglądał następująco:

left: 20px;

oraz

left:20px;

Zapis ten oznacza przesunięcie o 20 pikseli w prawo, rozpoczynając od lewej krawędzi.

Możemy również dokonać przesunięcia w kierunku przeciwnym. Wówczas zapis będzie prezentował się następująco:

left:-20px;

Sposób zapisu już znamy pora prześledzić możliwe do wykorzystania jednostki.

Jednostki relatywne / względne

• px – piksele
• % – procent szerokości / wysokości kontenera
• em – odniesienie do wysokości czcionki danego obiektu
• ex – wysokość małej litery x w danej czcionce
• ch – szerokość cyfry 0 w danej czcionce (Edge / Firefox)
• rem – wysokość czcionki korzenia (elementu HTML)

Jednostki absolutne / bezwzględne

• mm – milimetry
• cm – centymetry
• in – cale
• pt – punkty (miara drukarska, 1/72 cala)
• pc – pika ( = 12pt)