10/04/2016

CSS Box Model

10/04/2016

Penggunaan istilah Box Model (sebagaimana yang sering digunakan di berbagai pembelajaran CSS dan HTML) menunjukkan bahwa setiap elemen HTML didefinisikan sebagai elemen yang membentuk model kotak persegi panjang (terlepas dari bentuk yang disajikan), dan model kotak berlaku untuk semua elemen HTML (dan XHTML). Oleh karena itu, "Box Model" adalah spesifikasi yang mendefinisikan bagaimana sebuah kotak dan atributnya berhubungan satu sama lain. Dalam contoh yang paling sederhana, gambar berikut akan menjelaskan apa yang disebut box model.
box-model
Setiap elemen akan ditampilkan sebagai kotak persegi panjang, dan ada beberapa sifat yang menentukan ukuran kotak itu, seperti: lebar kotak (width); tinggi kotak (height); jarak antara batas kotak dengan isi kotak (padding); jarak antara batas kotak dengan elemen di luar kotak (margin; dan lain sebagainya.

Sampai di sini, penting untuk kita ketahui bahwa contoh kotak elemen pada gambar di atas hanya bersifat ilustratif belaka. Garis tepi yang saya gambarkan hanya berfungsi untuk menandai area kotak elemen beserta atributnya. Dan di bawah ini saya sertakan contoh nyata dari dokumen HTML beserta atribut CSS pembentuk Box Model. Klik tab "preview" untuk melihat demo.

Pada contoh di atas, kita akan fokus pada kotak berwarna kuning sebagai elemen yang menjadi contoh box model. Kotak kuning tersebut saya buat dengan tag HTML <p> dan saya membungkusnya dengan kotak biru yang saya buat dengan tag HTML <div>. Di sini kita melihat bahwa sebuah kotak elemen bersama atributnya (width, height, margin, dan padding) saling berkaitan dalam menentukan ukuran sebuah elemen, dalam kasus ini saya menggunakan jenis satuan ukuran lenght, yaitu pixel / px (pelajari lebih lanjut pada tautan berikut: satuan ukuran lenght). Jika diakumulasikan maka contoh kotak elemen pada gambar di atas (kotak kuning) memiliki ukuran total 200px untuk lebar elemen dan 150px untuk tinggi elemen dengan asumsi sebagai berikut:
  1. Lebar Kotak
    • width(lebar elemen) : 100px
    • padding kanan : 20px
    • padding kiri : 20px
    • margin kanan: 30px
    • margin kiri : 30px
    • Total ukuran lebar : 100px + 20px + 20px + 30px + 30px = 200px
  2. Tinggi Kotak
    • height(tinggi elemen) : 50px
    • padding atas : 20px
    • padding bawah: 20px
    • margin atas: 30px
    • margin bawah: 30px
    • Total ukuran tinggi: 50px + 20px + 20px + 30px + 30px = 150px

Mengenal Lebih Jauh Atribut CSS Box Model

Sebagian kita mungkin masih belum benar-benar memahamai apa dan bagaimana atribut CSS Box Model bekerja. Sebab, untuk menentukan ukuran sebenarnya dari kotak elemen kita perlu memperhitungkan lebar kotak elemen, jarak antara batas kotak elemen dengan isi kotak (konten), dan jarak antara batas kotak elemen dengan area luar kotak elemen.
Sejauh ini banyak sifat-sifat penentu ukuran kotak elemen seringkali menguras perhatian kita. Untuk memperjelas hal tersebut, mari kita mengulas satu persatu sifat-sifat kotak elemen yang juga menjadi atribut CSS Box Model pada tautan di bawah ini.