Selain itu juga akan dibahas tentang property overflow, rounding-corner, serta CSS Reset.
Pengertian CSS Box Model
CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
Sebagaimana layaknya ‘kotak’, masing-masing element HTML ini terdiri dari 4 lapisan, yakni:
konten (isi), padding, border dan margin. Keempat ‘lapisan’ inilah yang membangun CSS Box
Model.
Agar lebih mudah dipahami, perhatikan gambar berikut:
Konten atau teks dari sebuah element berada di bagian tengah. Kita bisa mengatur lebar dan tinggi konten ini menggunakan property width dan height.
Selanjutnya, terdapat padding. Padding adalah jarak antara konten dengan garis tepi (border) element. Sebagai contoh, jika kita membuat sebuah teks tanpa padding, maka teks tersebut akan mulai persis setelah garis tepi. Padding biasa ditambahkan supaya teks tidak menyentuh sisidalam dari sebuah sel tabel.
Setelah padding, berikutnya: border. Border merupakan pembatas element. Kita bisa mengatur berbagai hal tentang border, seperti ketebalan, warna, dan jenis garis yang digunakan.
Di lapisan terakhir terdapat margin. Margin adalah ‘spasi’ dari sebuah element dengan element lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap element tidak saling menempel satu sama lain.
Konsep box model sebenarnya cukup mudah dipahami. Namun dalam prakteknya, terdapat beberapa hal yang perlu penjelasan lebih lanjut, terutama tentang bagaimana keempat element ini saling berhubungan dengan element lain.
Property width dan height
Pembahasan mengenai Box Model akan kita mulai dari konten utama sebuah element. Untuk mengatur lebar dan tinggi element, bisa menggunakan property width dan height. Kedua property ini mendukung seluruh satuan nilai ‘length’ yang telah kita bahas dalam bab sebelumnya, seperti px, em, %, dan rem.
Berikut contoh penggunaan property width dan height:
01.width_and_height.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Belajar CSS</title>
6 <style>
7 h3 {
8 width: 300px;
9 height: 100px;
10 background-color: yellow;
11 }
12 p {
13 width: 800px;
14 height: 150px;
15 background-color: aqua;
16 }
17 </style>
18 </head>
19 <body>
20 <h3>Belajar Box Model</h3>
21 <p>Sebuah paragraf sederhana</p>
22 </body>
23 </html>
Selain property width dan height, dalam kode CSS diatas saya juga menambahkan property background-color. Property ini berfungsi untuk membuat warna latar belakang (background) dari sebuah element. Dengan demikian, kita bisa dengan mudah melihat ukuran sebenarnya dari element tersebut. Saya akan membahas mengenai property backround pada bab berikutnya.
Warna putih diantara kedua element ini merupakan margin bawaan web browser, kita akan membahas tentang margin beberapa saat lagi.