B.5. Box Model

Di chapter ini, kita akan membahas box model dalam CSS, konsep dasar yang sangat penting untuk memahami bagaimana elemen-elemen di halaman web diatur dan tampil. Semua elemen HTML sebenarnya berbentuk kotak (box), dan memahami bagaimana kotak-kotak ini bekerja sangat membantu dalam mengatur tata letak (layout). Mari kita jelajahi lebih dalam! 📦

B.5.1. Apa itu Box Model?

Box model adalah cara CSS mengatur setiap elemen di halaman sebagai kotak yang terdiri dari beberapa bagian: content, padding, border, dan margin. Setiap elemen HTML, seperti paragraf, gambar, atau div, semuanya diwakili sebagai kotak, dan box model membantu kita mengontrol bagaimana elemen-elemen tersebut berinteraksi satu sama lain.

Ketika teman-teman membuka sebuah file HTML di dalam web browser lalu klik kanan > inspect > tab element maka teman-teman akan melihat gambar seperti di bawah ini pada sebelah kanan jendela atau window.

Ketika teman-teman lakukan klik pada sebuah elemen, maka gambar di atas akan menampilkan margin, border, padding dan lebar dan tinggi content dari elemen tersebut.

• Content: Bagian dalam kotak yang berisi konten sebenarnya, seperti teks atau gambar. Lebar dan tinggi elemen ditentukan di sini.
• Padding: Ruang di sekitar konten, di dalam border. Ini memberi jarak antara konten dan tepi kotak.
• Border: Garis yang mengelilingi padding dan konten. Kita bisa mengatur ukuran, warna, dan gaya border ini.
• Margin: Ruang di luar border yang memberikan jarak antar elemen.

Sebagai contoh kita akan mempunyai sebuah kotak (box) yang berwarna blueviolet. Berikut kodenya:

index.html

<div class="box"></div>

style.css

.box {
  width: 300px;
  height: 150px;
  background-color: blueviolet;
}

Ketika kita buka di web browser lalu kita lakukan inspect pada elemen .box maka akan terlihat seperti:

Bisa teman-teman perbesar gambar nya, maka akan terlihat struktur box model dari elemen .box. Dimana elementary tersebut memiliki lebar 300px dan tinggi 150px, bisa teman-teman lihat juga bahwasannya elemen .box memiliki margin = -, border = - dan padding = -.

Apa itu padding, border dan margin? yuk kita bahas satu per-satu.

B.5.2. margin

Margin adalah properti terluar dari sebuah kotak atau box. Di dalam CSS kita dapat menggunakan properti margin untuk membuat jarak antara suatu kotak dengan kotak lainnya atau suatu elemen dengan elemen lainnya.

Pada kode sebelumnya, coba kita lakukan duplikasi atau buat satu elemen lagi dengan kelas yang sama yaitu .box.

index.html

<div class="box"></div>
<div class="box"></div>

style.css

body {
  border: 1px solid black;
}

.box {
  width: 300px;
  height: 150px;
  background-color: blueviolet;
}

Maka, hasilnya akan terlihat seperti:

Terlihat seperti satu buah elemen ya, tetapi sebenarnya itu adalah dua elemen yang menyatu. Nah, untuk memberi jarak pada elemen kita bisa menggunakan properti margin pada .box tersebut.

Terdapat beberapa properti untuk mengatur margin pada suatu elemen, di antaranya:

• margin-top : digunakan untuk mengatur jarak elemen ke atas.
• margin-right : digunakan untuk mengatur jarak elemen ke kanan.
• margin-bottom : digunakan untuk mengatur jarak elemen ke bawah.
• margin-left : digunakan untuk mengatur jarak elemen ke kiri.

Untuk memisahkan elemen di atas, kita dapat memberikan nilai untuk margin-bottom yang digunakan untuk memberi jarak pada sisi bawah elemen.

.box {
  width: 300px;
  height: 150px;
  background-color: blueviolet;
  margin-bottom: 1rem /* 16px */;
}

Bisa teman-teman lihat, sekarang dua kotak tadi sudah memiliki jarak. Properti di atas bisa teman-teman gunakan sesuai dengan kebutuhannya ya!.

Selain ke empat properti di atas, ada juga shorthand untuk mengatur empat, salah satu atau mengatur jarak berdasarkan sumbu x dan y yaitu margin. Cara menggunakannya cukup mudah:

.box {
  /*.....*/
  margin: top right bottom left;
}

Nah terdapat beberapa hal yang perlu teman-teman perhatikan terkait shorthand untuk margin ini, jika temen-temen hanya memberikan dua nilai saja seperti contoh:

.box {
  /*......*/
  margin: 1rem 2rem;
}

Ketika teman-teman memberikan nilai seperti pada kode di atas, maka nilai di urutan pertama akan digunakan untuk sumbu X (left + right) dan nilai ke dua akan digunakan sebagai nilai dari sumbu Y (top + bottom). Mari kita coba kita lihat perubahan yang di hasilkan.

Bisa teman-teman lihat, kedua kotak di atas memiliki jarak atas dan bawah sebanyak 1rem dan kiri kanan sebanyak 2rem. Jika teman-teman hanya memberikan satu nilai saja pada properti margin ini, maka nilai akan di terapkan untuk ke 4 sisi nya sekaligus.

.box {
  /*......*/
  margin: 1rem 2rem 4rem;
}

Nah, jika teman-teman mencoba memberikan nilai seperi kode di atas, maka akan berlaku nilai pertama adalah untuk margin-top, nilai kedua margin-left dan margin-right, nilai ke-tiga untuk margin-bottom.

B.5.3. border

Border merupakan sebuah elemen yang terletak di antara margin dan padding di dalam sebuah kotak atau box. Seperti namanya border digunakan untuk membuat garis tepi pada sebuah kotak, pada kasus-kasus sebelumnya kita tanpa sadar sudah pernah menggunakan border ya hehe.

Di dalam CSS terdapat properti border yang digunakan untuk membuat garis tepi pada sebuah kotak. Sama seperti margin, kita dapat mengatur masing-masing border dari 4 sisi di dalam sebuah kotak.

• border-top : digunakan untuk membauat garis tepi di sisi atas elemen.
• margin-right : digunakan untuk membauat garis tepi di sisi kanan elemen.
• margin-bottom : digunakan untuk membauat garis tepi di sisi bawah elemen.
• margin-left : digunakan untuk membauat garis tepi di sisi kiri elemen.

Cara menggunakan properti ini sangat mudah, contohnya seperti:

.box {
  /*......*/
  border-top: size type color;
}

size merupakan ukuran dari border yang bisa teman-teman isi dengan nilai seperti piksel (px), rem, pt, em dan lain-lain. Lalu ada type, untuk properti ini memiliki beberapa nilai yang bisa teman-teman pakai yaitu:

• solid: Garis padat.
• dashed: Garis putus-putus.
• dotted: Garis titik-titik.
• double: Dua garis padat.
• groove: Efek 3D dengan tampilan cekung.
• ridge: Efek 3D dengan tampilan menonjol.
• inset: Efek cekung pada batas.
• outset: Efek menonjol pada batas.
• none: Tidak ada batas.
• hidden: Sama seperti none, tetapi untuk elemen yang memiliki batas.

Bisa teman-teman coba satu per-satu untuk melihat hasilnya. Lalu selanjutnya untuk color, bisa teman-teman isi dengan menggunakan nilai rgb/rgba, hex, hsl/hsla dan bisa juga menyebutkan warna secara langsung seperti white, blue atau lainnya. Sehingga teman-teman bisa membuat border degan kode seperti:

.box {
  /*......*/
  border-top: 8px dashed yellow;
}

Maka hasilnya akan terlihat seperti:

Bisa dilihat, sekarang kotak nya memiiki border dengan garis berwarna kuning sebesar 8px dan jenis dari style yang digunakan adalah dashed (-).

Jika teman-teman ingin sekaligus mengatur border di ke 4 sisi dari kotaknya, teman-teman bisa menggunakan properti border secara langsung. Untuk pemberian nilai nya sama saja seperti sebelumnya ya!.

B.5.4. padding

Padding adalah ruang di dalam kotak atau box yang terletak di antara batas (border) elemen dan kontennya. Dalam CSS, kita dapat menggunakan properti padding untuk mengatur jarak antara konten di dalam elemen dengan batasnya. Padding membantu meningkatkan estetika dan keterbacaan konten dengan memberikan ruang yang cukup di sekelilingnya.

Contohnya, kita punya kode seperti ini:

index.html

<div class="box-with-content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, id?</p>
</div>

style.css

.box-with-content {
  width: 300px;
  height: 150px;
  background-color: bisque;
}

Hasil dari kode di atas akan terlihat seperti gambar berikut:

Bisa teman-teman lihat, konten di dalam div terlalu mepet dengan kotak nya sehingga terlihat kurang rapih. Untuk membuat jarak antara agar terlihat rapih, teman-teman bisa menggunakan properti padding.

Terdapat beberapa properti untuk mengatur padding pada suatu elemen, di antaranya:

• padding-top: Digunakan untuk mengatur jarak antara elemen ke atas.
• padding-right: Digunakan untuk mengatur jarak antara elemen ke kanan.
• padding-bottom: Digunakan untuk mengatur jarak antara elemen ke bawah.
• padding-left: Digunakan untuk mengatur jarak antara elemen ke kiri.

Untuk memberikan jarak di dalam kotak, kita bisa memberikan nilai untuk padding. Berikut contohnya:

.box-with-content {
  /*........*/
  padding-left: 1rem; /* 16px */
  padding-top: 1rem; /* 16px */
}

Pada kode di atas kita memberikan padding di bagian sisi atas dan kiri kotak, sehingga hasilnya akan terlihat seperti:

Atau jika teman-teman ingin secara langsung menerapkan pading di ke 4 sisi dari kotaknya, maka temen-temen bisa menggunakan properti padding.

.box-with-content {
  /*.....*/
  padding: top right bottom left;
}

Sama seperti border, Nilai di urutan pertama akan digunakan untuk padding atas dan bawah (top + bottom), sementara nilai kedua akan digunakan untuk padding kiri dan kanan (left + right). Jika di berikan 1 nilai saja maka semua sisi (atas, kanan, bawah, kiri) akan memiliki padding yang sama.

Jika di berikan 3 nilai saja, maka akan berlaku bahwa nilai pertama adalah untuk padding atas (top), nilai kedua untuk padding kiri dan kanan (left + right), dan nilai ketiga untuk padding bawah (bottom).

Nah jaidi itu konsep mengenai box model di dalam CSS. Pemahaman mendalam mengenai box model sangat penting dalam merancang tata letak halaman web yang rapi dan efisien. Dengan memahami bagaimana margin, padding, border, dan konten bekerja bersama, kita dapat mengontrol tampilan dan ruang elemen secara efektif.

Penggunaan box model tidak hanya membantu dalam meningkatkan estetika visual sebuah halaman, tetapi juga memengaruhi interaksi antar elemen di dalam tata letak yang kompleks. Oleh karena itu, pemanfaatan box model yang baik adalah salah satu fondasi utama dalam pengembangan web yang responsif dan terstruktur.

---

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.5-box-model

Mmm apakah halaman ini membantu🤔?

Ayo share tentang pengalaman belajarmu!