Belajar CSS Bagian 18: CSS Box Model

Pernahkah Anda bertanya-tanya bagaimana browser menata setiap elemen di halaman web? Mengapa ada jarak antar elemen, padding di dalam kotak, atau border yang membentuk struktur desain? Semua itu diatur oleh CSS Box Model, konsep dasar yang wajib dipahami oleh setiap web developer. Nah, dalam lanjutan materi belajar CSS bagian 18 ini, kita akan belajar lebih dalam tentang CSS Box Model.

Apa Itu CSS Box Model?

Pada dasarnya, setiap elemen pada halaman website baik teks, gambar, maupun tombol ditampilkan menggunakan konsep CSS Box Model. Konsep ini menggambarkan bahwa setiap elemen HTML berbentuk seperti sebuah kotak (box) yang terdiri dari beberapa lapisan: content, padding, border, dan margin.

Dengan memahami konsep Box Model, Anda akan lebih mudah dalam mengatur tata letak dan jarak antar elemen di halaman web. Misalnya, Anda bisa menyesuaikan ruang kosong di sekitar gambar, menambah batas di sekitar teks, atau mengatur jarak antar card agar tampilan website lebih rapi dan proporsional.

Fungsi Box Model CSS

Fungsi utama menggunakan box model adalah untuk memudahkan kita untuk menentukan lebar dan tinggi elemen html, menambahkan jarak dalam elemen (padding), garis tepi yang memberikan batas (border), serta mengatur jarak luar (margin) antar elemen.

Hal ini memudahkan dalam menyusun tata letak yang rapi, konsisten, dan responsif, sekaligus memastikan tampilan antar elemen tidak saling tumpang tindih atau berantakan.

Dengan CSS Box Model, Anda dapat dengan mudah mengatur jarak dan membedakan antara satu elemen (box) dengan elemen lainnya. Konsep ini mempermudah proses pengaturan tata letak, jarak, serta desain antar elemen, dan menjadi dasar untuk mempelajari layout modern seperti Flexbox dan CSS Grid.

Dari sisi tampilan, penggunaan Box Model membuat website terlihat lebih rapi, terstruktur, dan modern. Pengunjung pun akan lebih mudah memahami setiap bagian halaman karena setiap elemen memiliki ruang dan batas yang jelas.

Cara Kerja

Seperti yang telah dijelaskan di atas, box model css merupakan gabungan dari konten, padding, border, dan margin yang membuat sebuah box kotak di dalam tag html yang terdiri dari beberapa gabungan lapisan. Setiap box dalam CSS terdiri dari 4 bagian utama:

• Content: Isi elemen, seperti teks, gambar, atau konten lainnya.
• Padding: Ruang kosong di dalam elemen, antara konten dan border.
• Border: Garis tepi yang mengelilingi padding dan konten.
• Margin: Ruang luar elemen yang memisahkannya dari elemen lain.

Berikut adalah salah satu contoh script css untuk membuat box model yang sering digunakan.

div {
    background-color: yellow;
    border: 10px solid blue;
    padding: 20px;
    margin: 30px;
    width: 200px;
}

Kenapa Harus menggunakan Box Model?

Seperti yang telah dibahas sebelumnya, hal ini akan memudahkan pengembang web dalam menyusun tata letak yang rapi, konsisten, dan responsif, sekaligus memastikan tampilan antar elemen tidak saling tumpang tindih atau berantakan. Sedangkan dari sisi tampilan yang diakses oleh pengunjung website akan tersusun lebih rapi, modern dan lebih mudah untuk membedakan dengan box lain atau elemen lain.

Berikut beberapa alasan kenapa Box Model CSS penting dan harus digunakan:

1. Mengatur tata letak halaman: Memudahkan dalam menyusun posisi elemen agar tampilan web lebih rapi dan terstruktur.
2. Meningkatkan estetika desain: Dengan padding, border, dan margin, tampilan elemen bisa lebih menarik dan seimbang.
3. Kontrol jarak antar elemen: Margin dan padding membantu menjaga spasi yang konsisten antar elemen.
4. Mendukung desain responsif: Box Model mempermudah pengaturan ukuran elemen agar sesuai dengan berbagai ukuran layar.
5. Fleksibilitas dalam styling: Developer dapat menyesuaikan border, padding, dan margin untuk berbagai kebutuhan desain UI/UX.
6. Dasar dari layout modern: Konsep ini menjadi pondasi sebelum memahami teknik layout lanjutan seperti Flexbox atau Grid.

Contoh Implementasi dan penggunaan

Tidak jauh berbeda dengan script css mengenai border, Berikut adalah contoh script lengkap penggunaan box model CSS yang telah diterapkan ke kode html.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS Box Model</title>
    <style>
    .container {
        display: flex;
        justify-content: center;
    }
    .container div {
        margin: 10px;
        padding: 10px;
        background-color: #ffffff;
        border: 1px solid #dadada;
        border-radius: 10px;
        width: 200px;
        height: 300px;
    }
    body {
        background-color: aliceblue;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">Box Satu</div>
        <div class="box">Box Dua</div>
        <div class="box">Box Tiga</div>
        <div class="box">Box Empat</div>
    </div>
</body>
</html>

Jika di inspect element, maka detail mengenai penggunaan box model css akan terlihat penggunaan beberapa elemennya. Dan jika diakses melalui browser, maka akan tampil seperti gambar berikut:

Bagian Konten :

Isi elemen, seperti teks, gambar, atau konten lainnya.

Bagian Padding :

Ruang kosong di dalam elemen, antara konten dan border.

Bagian Border :

Garis tepi yang mengelilingi padding dan konten.

Bagian Margin :

Ruang luar elemen yang memisahkannya dari elemen lain.

Penutup

Secara garis besar, semua elemen dalam HTML merupakan gabungan dari bebera box, dan di dalamnya box tersebut terdapat berbagai properti CSS seperti `margin`, `padding`, `width`, `height`, `border`, `display`, dan lain sebagainya. 

Konsep Box Model ini sangat penting karena menentukan bagaimana ukuran, jarak, serta tata letak elemen dihitung dan ditampilkan di halaman web. Dengan memahami Box Model, pengembang dapat mengatur desain dan struktur halaman secara lebih rapi, presisi, serta responsif sesuai kebutuhan tampilan.

Demikian tutorial belajar CSS bagian 18 tentang CSS Box Model. Di tutorial belajar CSS bagian 19, kita akan belajar tentang height dan width di CSS. Simak terus series belajar CSS di Rumahweb Indonesia, semoga bermanfaat.