CSS Box Model & Pengaturan Layout

Setelah memahami Text Styling, Font & Color di Part 3, sekarang kita akan membahas konsep penting dalam CSS: Box Model & Pengaturan Layout.

Di Part 4 ini, kamu akan belajar tentang:

Konsep Box Model di CSS
Bagaimana margin, padding, border, dan konten bekerja
Penerapan layout menggunakan Box Model

Daftar Isi

Apa Itu Box Model?

Box Model adalah konsep dasar dalam CSS yang menggambarkan cara elemen HTML dihitung dan diatur dalam layout.

Setiap elemen HTML dianggap sebagai sebuah "kotak" yang terdiri dari beberapa bagian:

Content: Isi elemen (teks, gambar, dll)
Padding: Ruang di dalam kotak, antara content dan border
Border: Garis di sekitar elemen
Margin: Ruang di luar elemen, antara border dan elemen lain

Visualisasikan Box Model sebagai berikut:


+------------------------+
|       Margin           |
|  +-------------------+ |
|  |     Border        | |
|  |  +-------------+  | |
|  |  |  Padding    |  | |
|  |  |  +-------+  |  | |
|  |  |  | Content  |  | |
|  |  |  +-------+  |  | |
|  |  +-------------+  | |
|  +-------------------+ |
+------------------------+

Pengaturan Box Model dengan CSS

1. Margin

Margin adalah ruang kosong di luar border elemen. Gunakan properti margin untuk mengatur jarak antar elemen.

div {
    margin: 20px;
    padding: 10px;
    background-color: lightblue;
}

Setiap <div> memiliki jarak 20px dari elemen lain
Margin membuat kedua box tidak saling menempel
Background membantu melihat jaraknya

2. Padding

Padding adalah ruang di dalam border, di antara konten dan border elemen. Gunakan properti padding untuk memberi jarak antara isi dan batas elemen.

div {
    padding: 10px;
    border: 2px solid black;
    background-color: lightyellow;
}

Padding memberi jarak antara teks dan border
Border membantu melihat efek padding
Background memperjelas area elemen

Perbedaan Margin vs Padding

Margin = jarak di luar elemen
Padding = jarak di dalam elemen

Padding ikut terkena warna background, margin tidak.

3. Border

Border adalah garis yang mengelilingi elemen. Gunakan properti border untuk menambah atau mengubah batas elemen.

Elemen <div> memiliki border:

2px → ketebalan garis
solid → jenis garis (utuh)
#000 → warna hitam

Jenis Border yang Bisa Digunakan

Beberapa jenis garis border:

solid → garis utuh
dashed → garis putus-putus
dotted → titik-titik
double → garis ganda
none → tanpa border

div {
  border: 2px solid #000;
  padding: 10px;
  margin: 20px;
}

Penjelasan

Border membuat elemen terlihat seperti kotak
Padding memberi jarak isi dari border
Margin memberi jarak dari elemen lain

Ketiganya adalah bagian dari CSS Box Model

4. Content

Content adalah isi dari elemen, seperti teks atau gambar. Tidak ada properti khusus untuk content, namun akan dipengaruhi oleh padding dan margin.

Content di CSS

Content adalah isi dari elemen HTML, seperti:

teks
gambar
video
atau elemen lain di dalamnya

Content adalah bagian paling dalam dari sebuah elemen.

Contoh sederhana content:

<p>Ini adalah content berupa teks.</p>

Teks di dalam <p> itulah yang disebut content

Hubungan Content dengan Padding dan Margin

Walaupun tidak ada properti CSS khusus bernama content, bagian ini dipengaruhi oleh:

Padding - Memberi jarak antara content dan border
Border - Garis yang mengelilingi content + padding
Margin - Memberi jarak antar elemen

Semua ini membentuk yang disebut CSS Box Model.

div {
  padding: 20px;
  border: 2px solid black;
  margin: 20px;
  background-color: lightblue;
}

Penjelasan Contoh

Teks di dalam <div> = content
Padding memberi ruang di sekitar teks
Border membungkus content + padding
Margin memberi jarak dari elemen lain
Background memperlihatkan area content + padding

Box Sizing: Mengatur Perhitungan Box Model

1. Default box-sizing

Secara default, ukuran elemen dihitung berdasarkan width dan height yang hanya mencakup content. Padding dan border tidak dihitung dalam ukuran ini.

Default box-sizing di CSS

Secara default, CSS menggunakan box-sizing: content-box.

Artinya:

Properti width dan height hanya menghitung ukuran content saja
Padding dan border ditambahkan di luar ukuran tersebut

Jadi ukuran elemen sebenarnya bisa menjadi lebih besar dari yang kita tentukan.

div {
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightcoral;
}

Lebar total:

Content = 300px
Padding kiri + kanan = 20px + 20px = 40px
Border kiri + kanan = 5px + 5px = 10px

Total lebar = 350px

Tinggi total:

Content = 100px
Padding atas + bawah = 40px
Border atas + bawah = 10px

Total tinggi = 150px

2. box-sizing: border-box

Untuk menghitung padding dan border dalam ukuran elemen, gunakan box-sizing: border-box.

box-sizing: border-box di CSS

Properti box-sizing: border-box digunakan agar padding dan border dihitung didalam ukuran width dan height elemen.

Artinya:

Ukuran elemen tetap sesuai yang kita tentukan
Padding dan border tidak menambah ukuran total

Ini membuat layout lebih mudah dikontrol.

div {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  background-color: lightgreen;
}

Dengan border-box, ukuran total tetap:

Lebar = 300px
Tinggi = 100px

Padding dan border dihitung di dalam ukuran tersebut.

Berbeda dengan default (content-box) yang membuat elemen membesar.

Cara Kerja border-box (Sederhana)

Tanpa border-box:

Total ukuran = content + padding + border

Dengan border-box:

Total ukuran = width/height yang ditentukan
(content menyesuaikan otomatis)

Content akan mengecil agar padding dan border tetap muat.

Praktik Umum (Best Practice)

Banyak developer menerapkan border-box ke semua elemen:

* {
  box-sizing: border-box;
}

Ini membuat layout lebih konsisten dan mudah diatur.

Ringkasan Singkat

border-box berarti:

Padding & border masuk dalam width/height
Ukuran elemen tetap stabil
Layout lebih mudah dikontrol

Pengaturan Layout dengan CSS

1. Display

Properti display digunakan untuk menentukan jenis elemen layout. Beberapa nilai yang umum:

block – elemen yang mengambil seluruh lebar baris
inline – elemen yang hanya mengambil ruang seukuran kontennya
flex – elemen dengan tata letak fleksibel
grid – elemen dengan tata letak grid

2. Position

Properti position digunakan untuk mengatur posisi elemen dalam halaman.

static – default, elemen diposisikan sesuai alur dokumen
relative – elemen diposisikan relatif terhadap posisinya semula
absolute – elemen diposisikan relatif terhadap elemen induknya yang paling dekat
fixed – elemen diposisikan relatif terhadap viewport

Kesalahan Umum dengan Box Model & Layout

Lupa menghitung padding dan border dalam lebar elemen
Ukuran box tidak responsif
Posisi elemen tidak konsisten di berbagai perangkat

Ringkasan CSS Part 4

Box Model sangat penting dalam pengaturan layout
Gunakan box-sizing: border-box untuk menghindari perhitungan yang membingungkan
Display dan position adalah properti utama untuk pengaturan layout elemen

Lanjutan Materi

Di CSS Part 5, kita akan membahas:

Pengaturan Layout dengan Flexbox
Lebih mendalam tentang penggunaan Flexbox untuk layout responsif

Lanjut ke: Belajar CSS Part 5

Belajar CSS Part 4: Box Model & Pengaturan Layout