Lembaran Gaya Lata/Panjang dan Unit

Bagi menetapkan lebar, tinggi dan ukuran lain, kita dapat menggunakan pelbagai unit seperti yang tersenarai dalam jadual berikut.

Unit dalam CSS

Kod	Definisi	Nota
em	Ketinggian fon sesuatu unsur.
ex	Ketinggian huruf 'x' dalam fon unsur.
px	piksel
mm	milimeter
cm	sentimeter
pt	titik ("point", 1/72 inci)
pc	pika (12 point = 1/6 inci)
in	inci

Ukuran panjang boleh ditetapkan sebagai peratusan ukuran panjang yang lain. Penggunaan peratusan boleh menjadi rumit oleh sebab panjang asas (base length) berlainan bagi sifat yang berlainan. Sebagai contoh, apabila peratusan digunakan dengan sifat margin (jidar), pengiraan dilakukan berlandaskan lebar blok yang mengandungi kandungan tersebut. Apabila peratusan digunakan dengan sifat font-size (saiz fon) pengiraan berlandaskan font-size unsur induk akan tetapi dengan line-height (ketinggian baris) berlandaskan font-size unsur semasa.

Saiz-saiz fon pada skrin paling baik ditetapkan dengan menggunakan peratusan ataupun dalam unit em. (Lihat nota Mengguna em dengan Internet Explorer.) Ini bermakna laman akan berinteraksi dengan licin dengan keutamaan fon pengguna. Penggunaan piksel (px) untuk saiz fon mungkin dapat menyebabkan masalah dan harus dielak.

Unit-unit mutlak – mm, cm, pt, pc dan in – tidak bekerja dengan baik pada skrin dan menimbulkan masalah pada pelayar-pelayar lama. Unit-unit ini hanya harus digunakan bagi media cetak; namun dengan media cetak pun penggunaan unit-unit ini boleh menimbulkan masalah dengan keutamaan fon pengguna.

Unit-unit Relatif

Ketiga-tiga unit – em, ex dan px are disebut unit-unit relatif. Unit-unit ini tidak menetapkan panjang yang tetap, sebaliknya unit-unit ini mengikut skala kiraan yang lain. Dalam kes em dan ex, unit-unit ini berskala relatif kepada saiz fon sesuatu unsur.

Piksel skrin, piksel pencetak dan piksel CSS

Unit px menetapkan ukuran panjang dalam piksel CSS. Uinit piksel ini tidak sama dengan piksel skrin di mana dokumen dipaparkan mahupun titik alat pencetak yang mencetak dokumen. Satu piksel CSS mungkin dibuat sama dengan dua piksel skrin atau lima piksel cetak. Banyak pelayar web menggunakan peraturan bahawa satu piksel skrin sama dengan satu piksel CSS bagi memudahkan kerja akan tetapi anda tidak boleh menganggap ini sebagai penentuan tetap. Opera dan Internet Explorer versi 7 membenarkan pengguna untuk menukar bilangan piksel skrin bagi setiap piksel CSS. Sering kali pengguna yang terganggu penglihatan yang mengguna pelayar ini bagi memilih lima atau enam piksel skrin bagi setiap piksel CSS.

Definisi formal piksel CSS agak rumit akan tetapi idea asasnya adalah piksel CSS kelihatan sama saiznya apabila dokumen berada pada kejauhan yang membolehkan ia dibaca dengan selesa. Jadi piksel CSS sebenarnya lebih besar pada skrin monitor daripada skrin telefon bimbit oleh sebab monitor lazimnya berada lebih jauh dari mata pembaca berbanding telefon bimbit.

Penghitungan

bagi mendapatkan ukuran dalam unit em, bahagikan jidar yang dimahukan dengan lebar/tinggi bekasnya. Darab dengan 100 untuk mengubahnya kepada peratusan.

Bahagikan bekas yang dikehendaki dengan 1.62 untuk mengguna perkiraan Nisbah Keemasan (Golden Ratio) sebagai saiz blok kandungan. Tolak lebar kandungan daripada lebar bekas jika mahu menggunakan Nisbah Keemasan sebagai saiz side-bar.