Satuan Ukuran Yang Digunakan Pada CSS (CSS Measurement Units)
Dalam mendesain sebuah halaman website maka menentukan ukuran menjadi sangat penting. Seperti menentukan ukuran lebar halaman, tinggi halaman, ketebalan garis, ukuran forn, lebar dan tinggi blok tertentu seperti blok sidebar dan lain sebagainya.

Satuan Ukuran CSS
CSS memiliki jenis satuan ukuran yang bermacam-macam yang dapat kalian gunakan sesuai dengan kebutuhan kalian. Dari banyaknya jenis satuan ukuran dalam CSS, yang sering digunakan biasanya satuan % (persen) dan px (pixel). Namun tidak menutup kemungkinan kalian akan membutuhkan satuan ukuran lainnya.
Jenis Satuan Ukuran Pada CSS
Seperti yang sudah dijelaskan di atas, bahwa CSS memiliki banyak jenis satuan ukuran. Untuk itu perlu kita pelajari masing-masing satuan ukuran berdasarkan fungsi masing-masing jenis satuan ukuran, sehingga dapat menggunakannya dengan tepat.
Berikut ini adalah tabel jenis satuan ukuran pada CSS :
Satuan | Deskripsi | Contoh |
---|---|---|
% | Untuk menentukan ukuran yang sifatnya relatif terhadap nilai lain. | p {line-height: 125%;} |
cm | Menentukan ukuran dalam centimeter. | div {margin-bottom: 2cm;} |
em | Satuan ukuran yang relatif terhadap ketinggian font dalam spasi em. Karena unit em setara dengan ukuran font yang diberikan, jika Anda menetapkan font ke 12pt, setiap unit “em” akan menjadi 12pt; dengan demikian, 2em akan menjadi 24pt. | p {letter-spacing: 7em;} |
ex | Nilai ini mendefinisikan pengukuran relatif terhadap tinggi x font. Ketinggian x ditentukan oleh tinggi huruf kecil font x. | p {font-size: 24pt; line-height: 3ex;} |
in | Menentukan ukuran dalam inchi. | p {word-spacing: .15in;} |
mm | Menentukan ukuran dalam milimeter. | p {word-spacing: 15mm;} |
pc | Menentukan pengukuran dalam picas. 1 pica setara dengan 12 point; dengan demikian, ada 6 pica per inci. | p {font-size: 20pc;} |
pt | Menentukan pengukuran dalam point. Suatu titik didefinisikan sebagai 1/72 inci. | body {font-size: 18pt;} |
px | Menentukan pengukuran dalam piksel layar. | p {padding: 25px;} |
Setelah kalian mengetahui berbagai jenis satuan ukuran yang digunakan pada CSS, diharapkan kedepannya kalian tidak bingung ketika menemukan satuan ukuran yang bermacam-macam di CSS.
Satuan ukuran apa yang akan kita gunakan tentu menyesuaikan dengan kebutuhan. Konsistensi dalam penggunakan satuan ukuran misal % dan pixel akan mempermudah kalian dalam pembacaan kode, namun jika kalian sudah mahir silahkan gunakan semua satuan ukuran yang didukung CSS dengan sesuka kalian.
Jika ada pertanyaan silahkan menulis pada kolom komentar blog ini.