Di artikel sebelumnya, Anda sudah mempelajari dasar-dasar CSS yang terbagi ke dalam beberapa topik pembahasan. Mulai dari pengenalan CSS sampai tipe-tipe selektor. Sekarang, kita akan mulai memasuki materi yang lebih jauh yaitu CSS Box Model. Sebelum memulai pembahasan materi, pertama-tama Anda harus memahami apa yang dimaksud dengan box model dan kegunaannya dalam pemrograman web.
Apa itu Box Model?
Setiap elemen HTML ditampilkan dalam bentuk box (kotak). Jika diperhatikan, sebuah website umumnya terbagi menjadi beberapa area. Mulai dari menu di bagian atas, isi konten di bagian tengah, iklan di sisi kanan, sampai credit dan info kontak di bagian paling bawah. Berikut contoh website yang menggunakan box model:
Memang tidak semua website didesain seperti itu. Penempatannya bisa disesuaikan dengan kebutuhan dan gaya yang diinginkan. Tapi dari ilustrasi di atas, bisa kita simpulkan bahwa website selalu ditampilkan dalam bentuk kotak-kotak. Inilah yang dimaksud dengan box model.
Box model bertujuan untuk menyusun elemen-elemen website agar terlihat lebih rapi dan menarik. Tidak hanya dari segi tampilan, interaksi dengan pengguna pun juga lebih maksimal. Penyusunan yang tepat akan membuat website Anda menjadi lebih intuitif.
Karena setiap elemen disusun dan ditempatkan dengan rapi, pengguna bisa lebih mudah mencari dan menggunakan setiap fitur yang ada di website Anda. Hasilnya, website Anda menjadi lebih mudah untuk digunakan, menarik secara visual, dan membuat pengunjung betah berlama-lama di sana.
Fungsi CSS Box Model
Anda sudah mengetahui bahwa CSS adalah make-up bagi sebuah website. Fungsi utamanya adalah mendesain tampilan website agar terlihat lebih cantik dan menarik. Jika dikaitkan dengan model kotak-kotak yang kita bahas di atas, maka fungsi CSS Box Model adalah untuk menata dan mempercantik kotak-kotak tersebut.
Setiap elemen dalam website harus didesain dengan teliti. Mulai dari ukuran, warna, penempatan, sampai jarak antar elemen. Anda tidak akan mendapatkan hasil yang memuaskan kalau hanya mengandalkan HTML untuk urusan ini. Karena itulah CSS Box Model hadir untuk melengkapi kekurangan-kekurangan HTML.
CSS Box Model menyediakan fitur lengkap untuk mendesain elemen-elemen website sesuai keinginan Anda. Sekarang, mari kita bahas semuanya satu-per-satu.
3 Property CSS Box Model yang Wajib Anda Ketahui
CSS Box Model terdiri dari 3 property yaitu margin, padding, dan border. Masing-masing property mempunyai fungsi dan cara penggunaan tersendiri. Kita mulai dari property yang pertama.
1. Margin
Dalam Model Box CSS, property margin digunakan untuk mengatur jarak antar elemen. Tanpa pengaturan margin, elemen-elemen website Anda bisa saling berbenturan atau melekat satu sama lain. Ini akan membuat website Anda terlihat berantakan dan tidak menarik.
Penggunaan property margin bisa Anda lihat pada contoh kode di bawah ini.
<html>
<head>
<title>Belajar CSS Box Model</title>
<style>
.elemen {
width : 120px;
height : 120px;
background-color : red;
margin-bottom : 30px;
}
</style>
</head>
<body>
<div class="elemen">
Elemen 1
</div>
<div class="elemen">
Elemen 2
</div>
</body>
</html>
Jalankan kode di atas menggunakan web browser. Anda akan melihat dua kotak berwarna merah seperti di bawah ini :
Terdapat jarak antara Elemen 1 dan elemen 2. Jarak tersebut kita buat dengan property margin-bottom seperti pada contoh kode di atas. Coba saja mengubah nilai margin-bottom dari 70px ke nilai berapa pun yang Anda suka. Jarak antara kedua kotak tersebut pasti juga berubah.
Property margin digunakan untuk mengatur jarak antar elemen. Tidak hanya ke bawah, Anda juga bisa menentukan jarak di sisi atas, kiri, dan kanan. Lihat tabel di bawah :
| Property | Fungsi | Contoh |
| margin-top | Mengatur jarak elemen di sisi atas | margin-top : 50px |
| margin-bottom | Mengatur jarak elemen di sisi bawah | margin-bottom : 50px |
| margin-left | Mengatur jarak elemen di sisi kiri | margin-left : 50px |
| margin-right | Mengatur jarak elemen di sisi kanan | margin-right : 50px |
Menggunakan CSS Shorthand Pada Property Margin
Dalam CSS Model Box, property margin bisa dibuat lebih efisien menggunakan CSS Shorthand. Contohnya sebagai berikut :
margin: 50px 30px 50px 30px; Pada contoh di atas, property margin dibuat lebih ringkas menjadi satu baris yang langsung berisi empat nilai. Secara berurutan, nilai-nilai tersebut adalah top (atas), right (kanan), bottom (bawah), dan left (kiri).
Selain menentukan ukuran margin untuk masing-masing sisi seperti di atas, Anda juga bisa menggunakan Shorthand yang lebih ringkas seperti di bawah ini :
margin: 50px 30px; Pada contoh kode di atas, kita hanya menentukan dua nilai margin. Nilai yang pertama digunakan untuk sisi atas dan bawah. Nilai yang terakhir menentukan ukuran margin kiri dan kanan. Shorthand di atas digunakan apabila margin atas dan bawah bernilai sama, serta kiri dan kanan juga bernilai sama.
Atau, Anda juga bisa menggunakan shorthand yang satu ini :
margin: 50px 40px 30px;Dengan shorthand di atas, margin top ditentukan dengan nilai pertama yaitu 50px. Nilai kedua menentukan margin kiri dan kanan. Sedangkan nilai terakhir adalah margin bottom. Ini digunakan bila margin kiri dan kanan bernilai sama, tapi atas dan bawahnya berbeda.
2. Padding
Property CSS Box Model yang kedua adalah padding. Fungsi dari property ini adalah untuk memberikan jarak pada isi elemen.
Coba Anda lihat lagi gambar kedua kotak di atas. Walaupun kita sudah membuat jarak antara elemen 1 dan elemen 2, tapi teks yang tertulis di dalam elemen terlihat terlalu mepet ke garis kotak.
Hal ini membuat teks terlihat tidak rapi. Untuk mengatasinya, Anda bisa menggunakan property padding agar teks diletakkan agak ke tengah sehingga tidak terlalu mepet.
Contohnya seperti ini :
<html>
<head>
<title>Belajar CSS Box Model</title>
<style>
.elemen {
width : 120px;
height : 120px;
background-color : red;
margin-bottom : 30px;
padding-left : 10px;
padding-top : 10px;
}
</style>
</head>
<body>
<div class="elemen">
Elemen 1
</div>
<div class="elemen">
Elemen 2
</div>
</body>
</html>
Dari contoh kode sebelumnya, kita tambahkan dua property padding. Yang pertama adalah padding-left untuk memberi jarak dari sisi kiri. Kemudian padding-top untuk jarak dari atas. Hasilnya bisa Anda lihat pada gambar berikut ini :
Dengan menentukan padding, teks dalam elemen terlihat lebih berjarak dari garis kotak. Dengan begitu, teks menjadi lebih rapi dan mudah untuk dibaca.
Sama seperti margin, padding juga terdiri dari empat property, yaitu :
| Property | Fungsi | Contoh |
| padding-top | Mengatur jarak elemen dengan isi dari sisi atas | padding-top : 50px |
| padding-bottom | Mengatur jarakelemen dengan isi dari sisi bawah | padding-bottom : 50px |
| padding-left | Mengatur jarak elemen dengan isi dari sisi kiri | padding-left : 50px |
| padding-right | Mengatur jarak elemen dengan isi dari sisi kanan | padding-right : 50px |
Penting untuk dicatat bahwa padding left dan right akan menambah ukuran width. Sedangkan top dan bottom menambah ukuran height.
Misalnya, pada contoh di atas, kita memberikan nilai sebesar 10px untuk padding-left dan padding-top. Secara otomatis, ukuran width dan height elemen juga akan bertambah sebesar 10px menjadi 130px.
Untuk penggunaan CSS shorthand, penerapannya sama persis dengan margin.
3. Border
Anda mungkin sudah tidak asing lagi dengan istilah border. Dalam CSS Box Model, border berfungsi untuk memberikan garis pinggir. Coba Anda lihat lagi contoh di atas. Warna merah pada elemen berbenturan langsung dengan background.
Border sangat diperlukan jika warna elemen dan warna background saling tumpang tindih. Bayangkan jika Anda harus mencantumkan gambar bendera merah putih di website berwarna background putih. Warna putih pada bendera akan menyatu dengan background sehingga pengunjung hanya akan melihat warna merah.
Lain halnya jika Anda memberikan batas pada gambar bendera berupa border berwarna hitam. Pengunjung akan melihat bahwa gambar tersebut adalah bendera merah putih. Itulah gunanya border.
Penggunaan property border pada CSS Box Model bisa Anda lihat pada contoh kode berikut :
<html>
<head>
<title>Belajar CSS Box Model</title>
<style>
.elemen {
width : 120px;
height : 120px;
background-color : red;
margin-bottom : 30px;
padding-left : 10px;
padding-top : 10px;
border-width : 6px;
border-style : solid;
border-color : black;
}
</style>
</head>
<body>
<div class="elemen">
Elemen 1
</div>
<div class="elemen">
Elemen 2
</div>
</body>
</html>
Dapat dilihat bahwa ada 3 property baru yang kita tambahkan. Jika Anda menjalankan kode di atas di web browser, Anda akan mendapatkan hasil seperti ini :
Anda bisa melihat ada garis hitam yang membatasi keempat sisi elemen. Itu adalah hasil dari property border yang kita tentukan pada kode di atas.
Penjelasan dari ketiga property border tersebut bisa Anda lihat pada tabel di bawah ini :
| Property | Fungsi | Contoh |
| border-width | Mengatur ketebalan border | border-width : 6px |
| border-style | Mengatur jenis border | border-style : solid |
| padding-left | Mengatur jarak elemen dengan isi dari sisi kiri | margin-left : 50px |
Sama seperti margin dan padding, ukuran border juga akan menambah ukuran elemen. Jadi perhitungkan baik-baik ukuran elemen yang Anda inginkan dengan menyertakan padding dan border.
Menggunakan CSS Shorthand Pada Property Border
Untuk menggunakan Shorthand pada property border, Anda bisa mengikuti contoh seperti di bawah ini :
border: 6px solid black;Dengan shorthand di atas, kita menentukan ukuran, jenis, dan warna border dalam satu baris sekaligus. Cara ini tentu lebih efisien dalam penulisan kode program daripada harus menentukan setiap property satu-per-satu. Kecuali jika memang Anda merasa perlu menuliskan setiap property secara spesifik.
Untuk memperdalam pemahaman Anda mengenai CSS Box Model, Anda bisa memodifikasi contoh kode di atas dengan nilai-nilai yang berbeda. Buatlah lebih banyak elemen dengan mencoba setiap property yang baru saja Anda pelajari. Praktik langsung adalah cara paling efektif untuk memahami dan mengingat materi pemrograman.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development