BOX SIZING

Dalam pembuatan website, salah satu prinsip penting yang perlu dipahami adalah bagaimana menentukan ukuran dari elemen-elemen pada halaman web. Dalam CSS, sebuah fitur yang mendukung hal ini adalah ‘Box Sizing’. Artikel ini akan membahas apa itu Box Sizing dan bagaimana menggunakannya.

Apa Itu Box Sizing?

Box Sizing adalah properti CSS yang memungkinkan kamu untuk menentukan bagaimana ukuran elemen HTML, seperti lebar dan tinggi, harus dikalkulasikan. Secara default, CSS mengatur ukuran elemen berdasarkan kontennya saja. Sementara itu, dengan menggunakan Box Sizing, kamu bisa menentukan apakah padding dan border harus ikut serta dalam kalkulasi ukuran elemen.

Bagaimana Menggunakan Box Sizing?

Untuk menggunakannya, kamu harus menentukan nilai dari properti box-sizing. Nilai ini bisa berupa content-box atau border-box.

Content-Box

Content-Box adalah nilai default dari box-sizing. Nilai ini berarti lebar dan tinggi elemen hanya mencakup kontennya saja. Padding dan border ditambahkan di luar lebar dan tinggi yang diatur, sehingga menjadi lebih besar dari angka yang kamu tentukan.

Misalkan kamu membuat sebuah div dengan lebar 300px, dan menambahkan padding 10px serta border 5px. Maka, lebar total dari div tersebut akan menjadi 330px (300px lebar konten + 20px padding kiri dan kanan + 10px border kiri dan kanan).

Border-Box

Sementara itu, apabila menggunakan nilai border-box, maka lebar dan tinggi elemen akan mencakup konten, padding, dan border. Apabila kamu memiliki div dengan lebar 300px, dan menambahkan padding 10px serta border 5px, lebar totalnya tetap 300px. Lebar konten akan menyesuaikan dengan ruang yang tersedia setelah padding dan border.

Contoh Penggunaan

Berikut adalah contoh penggunaan box-sizing: border-box; dalam CSS.

div {
  box-sizing: border-box;
}

Dalam contoh di atas, semua elemen div pada halaman akan memiliki box sizing dengan jenis border-box.