Memahami CSS Box Model: Margin, Border, Padding, dan Content

Browser Melihat Elemen sebagai Kotak#

Ambil section Tentang Saya dari project kita:

1
<section id="tentang">
2
  <h2>Tentang Saya</h2>
3

4
  <p>
5
    Halo! Saya BapakGabut.
6
    Saat ini saya sedang belajar membuat website
7
    menggunakan HTML.
8
  </p>
9
</section>

Kita melihat:

1
heading
2
paragraf

Browser juga perlu menghitung ruang yang ditempati elemen tersebut.

Untuk memahami perhitungan itu, kita bisa membayangkan sebuah elemen sebagai kotak yang memiliki beberapa lapisan.

1
┌────────────── margin ──────────────┐
2
│  ┌─────────── border ────────────┐  │
3
│  │  ┌──────── padding ────────┐  │  │
4
│  │  │                         │  │  │
5
│  │  │         content         │  │  │
6
│  │  │                         │  │  │
7
│  │  └─────────────────────────┘  │  │
8
│  └───────────────────────────────┘  │
9
└─────────────────────────────────────┘

Dari dalam ke luar:

1
content
2
↓
3
padding
4
↓
5
border
6
↓
7
margin

Inilah konsep dasar yang disebut CSS Box Model.

Sekarang kita bongkar satu per satu.

Content: Isi Kotaknya#

Bagian paling dalam adalah:

content.

Misalnya:

1
<p>Ngoding, main game, dan ngulik apa saja.</p>

Teks tersebut berada pada area content.

Pada elemen lain, content bisa berupa:

• teks;
• gambar;
• elemen lain;
• form;
• dan sebagainya.

Untuk sekarang kita cukup membayangkan content sebagai area tempat isi elemen dirender.

Padding: Ruang di Dalam Kotak#

Sekarang kita kembali ke:

1
padding: 20px;

Padding adalah ruang antara content dan border elemen.

Mari kita melihatnya langsung pada project profil.

Buka index.html, lalu tambahkan class card pada section Tentang Saya:

1
<section id="tentang" class="card">
2
  <h2>Tentang Saya</h2>
3

4
  <p>
5
    Halo! Saya BapakGabut.
6
    Saat ini saya sedang belajar membuat website
7
    menggunakan HTML.
8
  </p>
9
</section>

Kita tidak mengganti id="tentang".

id tersebut masih dibutuhkan oleh link navigasi:

1
<a href="#tentang">Tentang</a>

Kita hanya menambahkan class baru agar section tersebut mudah diatur tampilannya.

Sekarang buka style.css, lalu tambahkan:

1
.card {
2
  background-color: white;
3
  padding: 20px;
4
}

Simpan dan refresh.

Sekarang isi section tidak menempel langsung pada tepi background putih.

Ruang tersebut berada di dalam box.

Itulah padding.

Secara konseptual:

1
┌─────────────────────────┐
2
│         padding         │
3
│   ┌─────────────────┐   │
4
│   │     content     │   │
5
│   └─────────────────┘   │
6
│         padding         │
7
└─────────────────────────┘

Background elemen juga terlihat pada area padding.

Ini nanti membantu kita membedakan padding dari margin.

Border: Garis di Sekelilingnya#

Saat ini kita sudah memberi background putih pada card.

Tetapi batas kotaknya mungkin belum terlalu jelas karena background halaman juga cukup terang.

Sekarang tambahkan border:

1
.card {
2
  background-color: white;
3
  padding: 20px;
4
  border: 2px solid #d1d5db;
5
}

Refresh.

Sekarang batas box menjadi jauh lebih mudah dilihat.

Aturan:

1
border: 2px solid #d1d5db;

secara praktis berarti kita memberi border dengan:

1
ketebalan: 2px
2
gaya: solid
3
warna: #d1d5db

Kita tidak perlu membedah seluruh variasi border sekarang.

Yang penting kita bisa melihat urutannya:

1
content
2
↓
3
padding
4
↓
5
border

Border mengelilingi area content dan padding.

Margin: Ruang di Luar Kotak#

Sekarang kita punya card.

Tapi kalau ada beberapa section, card-card tersebut bisa terasa terlalu berdekatan.

Tambahkan:

1
.card {
2
  background-color: white;
3
  padding: 20px;
4
  border: 2px solid #d1d5db;
5
  margin-bottom: 20px;
6
}

Refresh.

Sekarang ada ruang setelah card.

Bedanya dengan padding?

Lihat posisinya.

Padding berada sebelum border:

1
border
2
│
3
│  padding
4
│  ┌──────── content

Margin berada setelah border:

1
content
2
↓
3
padding
4
↓
5
border
6
↓
7
margin
8
↓
9
elemen berikutnya

Jadi cara sederhana membedakannya:

Padding memberi ruang di dalam batas elemen.

Margin memberi ruang di luar batas elemen.

Background putih .card terlihat pada content dan padding, tetapi tidak mengisi area margin.

Margin berada di luar border dan transparan.

Mental model tersebut belum mencakup semua perilaku margin di CSS. Margin vertikal tertentu, misalnya, bisa memiliki perilaku khusus ketika bertemu margin elemen lain.

Kita belum perlu membahas detail itu sekarang.

Eksperimen: Padding atau Margin?#

Coba hapus sementara:

1
padding: 20px;

Refresh.

Isi card kembali mendekati border.

Sekarang kembalikan padding, lalu hapus:

1
margin-bottom: 20px;

Refresh.

Isi card tetap memiliki ruang dari border.

Tetapi jarak dengan elemen berikutnya berubah.

Eksperimen kecil ini biasanya jauh lebih mudah diingat daripada sekadar menghafal:

1
padding = dalam
2
margin = luar

Karena kita melihat sendiri efeknya.

Empat Sisi Box#

Padding dan margin sebenarnya bisa diatur untuk masing-masing sisi.

Misalnya:

1
padding-top: 10px;
2
padding-right: 20px;
3
padding-bottom: 10px;
4
padding-left: 20px;

Begitu juga margin:

1
margin-top: 10px;
2
margin-right: 20px;
3
margin-bottom: 10px;
4
margin-left: 20px;

Tapi menulis empat baris terus-menerus cukup melelahkan.

CSS menyediakan bentuk singkat atau shorthand.

Shorthand Padding dan Margin#

Kalau kita menulis satu nilai:

1
padding: 20px;

semua sisi mendapat nilai yang sama.

1
atas    20px
2
kanan   20px
3
bawah   20px
4
kiri    20px

Kalau dua nilai:

1
padding: 10px 20px;

artinya:

1
atas + bawah  → 10px
2
kanan + kiri  → 20px

Atau kalau ingin mengingatnya dengan istilah yang sering muncul di dokumentasi:

1
vertical | horizontal

Kalau empat nilai:

1
padding: 10px 20px 30px 40px;

urutannya:

1
atas    10px
2
kanan   20px
3
bawah   30px
4
kiri    40px

Atau:

1
top → right → bottom → left

Tidak perlu langsung menghafalnya mati-matian.

Kalau lupa, developer juga boleh membuka dokumentasi. 😄

Yang penting kita tahu bahwa shorthand tersebut ada.

Konsep yang sama juga berlaku pada margin.

Sekarang Masuk ke Width#

Mari buat contoh sederhana:

1
.card {
2
  width: 300px;
3
  padding: 20px;
4
  border: 2px solid #d1d5db;
5
}

Sekilas kita mungkin berpikir:

Oke, berarti lebar card 300px.

Ternyata…

belum tentu ukuran total box-nya 300px.

Kenapa?

Karena secara default elemen menggunakan:

1
box-sizing: content-box;

Pada model ini, width mengatur lebar content box.

Jadi pada contoh tadi, perhitungan horizontal sampai ke sisi luar border adalah:

1
content         300px
2
padding kiri     20px
3
padding kanan    20px
4
border kiri       2px
5
border kanan      2px
6
--------------------- +
7
total            344px

Atau:

1
300 + 20 + 20 + 2 + 2
2
= 344px

Jadi kita menulis:

1
width: 300px;

tetapi box yang terlihat sampai border menjadi:

1
344px

Margin berada di luar ukuran 344px tersebut. Margin bukan bagian dari ukuran border box.

Perhitungan ini berlaku selama tidak ada kondisi lain yang mengubah cara ukuran elemen tersebut dihitung.

Kalau belum tahu Box Model, bagian ini sering terasa seperti:

CSS kok tidak bisa berhitung? 😄

CSS-nya bisa.

Kita saja yang baru tahu apa yang sebenarnya dihitung.

Kenalan dengan box-sizing#

Ada cara lain menghitung width yang sering lebih nyaman ketika kita mengatur ukuran elemen.

Gunakan:

1
box-sizing: border-box;

Sekarang aturan card kita menjadi:

1
.card {
2
  width: 300px;
3
  padding: 20px;
4
  border: 2px solid #d1d5db;
5
  box-sizing: border-box;
6
}

Dengan:

1
box-sizing: border-box;

nilai width: 300px mencakup:

• content;
• padding;
• border.

Jadi ukuran sampai batas luar border tetap:

1
300px

Browser menyesuaikan lebar content agar padding dan border tetap muat di dalam ukuran tersebut.

Bandingkan:

1
content-box
2

3
width
4
↓
5
content saja
6

7
+ padding
8
+ border
9
↓
10
ukuran sampai border bertambah

dengan:

1
border-box
2

3
width
4
↓
5
content + padding + border
6

7
ukuran sampai border tetap sesuai width

Margin tetap berada di luar perhitungan width pada keduanya.

Ini salah satu property kecil yang nantinya sangat membantu ketika kita mulai mengatur layout.

Banyak project menerapkan border-box secara lebih luas pada banyak elemen. Tetapi sekarang kita menggunakannya langsung pada .card agar lebih dulu memahami apa yang diubah oleh property tersebut.

Bagaimana dengan Height?#

Prinsip yang sama berlaku pada:

1
height

Misalnya:

1
.card {
2
  height: 200px;
3
}

Pada content-box, nilai tersebut menentukan tinggi content area.

Padding dan border dapat menambah tinggi box.

Dengan border-box, padding dan border dihitung di dalam tinggi yang ditentukan.

Tetapi ada satu kebiasaan yang perlu kita bangun sejak awal:

Jangan buru-buru memberi height tetap pada semua elemen.

Sering kali lebih baik membiarkan tinggi elemen mengikuti content-nya.

Kalau teks bertambah tetapi tinggi dipaksa terlalu kecil, kita justru bisa menciptakan masalah baru.

Jadi untuk project kita sekarang, kita lebih banyak bermain dengan width, padding, border, dan margin.

Terapkan ke Halaman Profil#

Sekarang mari gunakan Box Model untuk membuat beberapa bagian halaman lebih mudah dibaca.

Di CSS #2 kita sudah belajar bahwa satu class dapat digunakan pada banyak elemen.

Karena itu kita bisa menambahkan class card pada beberapa section yang sudah ada di index.html.

Section Tentang Saya:

1
<section id="tentang" class="card">
2
  <h2>Tentang Saya</h2>
3
  <!-- gambar dan paragraf tetap seperti sebelumnya -->
4
</section>

Section Yang Sedang Saya Pelajari:

1
<section id="belajar" class="card">
2
  <h2>Yang Sedang Saya Pelajari</h2>
3
  <!-- daftar tetap seperti sebelumnya -->
4
</section>

Section Link Favorit memang tidak memiliki id, dan itu tidak menjadi masalah:

1
<section class="card">
2
  <h2>Link Favorit</h2>
3
  <!-- daftar link tetap seperti sebelumnya -->
4
</section>

Section Hubungi Saya:

1
<section id="kontak" class="card">
2
  <h2>Hubungi Saya</h2>
3
  <!-- form tetap seperti sebelumnya -->
4
</section>

Kita tidak menghapus id yang dipakai oleh navigasi.

Satu elemen boleh memiliki id dan class sekaligus karena keduanya memiliki fungsi berbeda.

Sekarang gunakan aturan berikut di style.css:

1
.card {
2
  background-color: white;
3
  padding: 20px;
4
  border: 1px solid #d1d5db;
5
  margin-bottom: 20px;
6
  box-sizing: border-box;
7
}

Simpan, lalu refresh browser.

Sekarang beberapa section memiliki pola visual yang sama.

Perhatikan sesuatu dari CSS #2.

Kita tidak perlu menulis:

1
#tentang {
2
  background-color: white;
3
  padding: 20px;
4
  border: 1px solid #d1d5db;
5
  margin-bottom: 20px;
6
  box-sizing: border-box;
7
}

lalu mengulang semua declaration tersebut untuk #belajar dan #kontak.

Kita menggunakan:

1
.card

karena style tersebut memang ingin digunakan ulang.

Jadi materi selector dari artikel sebelumnya mulai terpakai pada project nyata.

Kita juga tidak perlu memasang width: 300px pada card project kita. Nilai tersebut tadi hanya dipakai untuk memahami perhitungan ukuran dengan angka yang mudah dilihat.

Jangan Terlalu Sibuk Mempercantik#

Sekarang halaman profil kita mulai terlihat lebih rapi.

Tapi jangan tergoda menambahkan semua hal sekaligus.

Belum perlu:

1
shadow
2
gradient
3
animation
4
layout rumit

Target kita sekarang adalah memahami:

1
Kenapa elemen punya ukuran seperti ini?
2

3
Kenapa ada ruang di sini?
4

5
Ruang tersebut padding atau margin?
6

7
Border berada di mana?
8

9
Apa yang sebenarnya dihitung oleh width?

Kalau pertanyaan tersebut mulai bisa Gabuters jawab, Box Model sudah mulai masuk akal.

Bonus: Lihat Box Model dari Browser#

Browser modern memiliki Developer Tools atau DevTools.

Buka halaman profil.

Klik kanan pada salah satu card, lalu pilih menu untuk memeriksa atau meng-inspect elemen. Nama menunya bisa sedikit berbeda pada setiap browser.

Pada panel style atau computed, biasanya ada visualisasi Box Model yang menunjukkan:

1
margin
2
border
3
padding
4
content

Tampilan persisnya juga bisa berbeda antar-browser.

Tapi konsepnya sama.

Ini sangat berguna ketika suatu hari kita melihat:

Kok jaraknya dari mana, ya?

Daripada menebak-nebak, inspect elemennya.

Developer tidak harus menyimpan seluruh CSS di kepala.

Kita juga punya alat untuk melihat apa yang sedang dilakukan browser.

Coba Rusakkan Box-nya#

Seperti biasa, eksperimen sebentar. 😄

Coba:

1
.card {
2
  padding: 60px;
3
}

Refresh.

Lalu:

1
.card {
2
  margin-bottom: 80px;
3
}

Refresh.

Coba border lebih tebal:

1
.card {
2
  border: 10px solid tomato;
3
}

Kemudian coba bandingkan:

1
box-sizing: content-box;

dengan:

1
box-sizing: border-box;

sambil menggunakan width pada card untuk sementara.

Tujuannya bukan membuat desain bagus.

Tujuannya supaya mata kita mulai bisa mengenali:

1
ini padding
2

3
ini border
4

5
ini margin
6

7
ini content

Setelah selesai, kembalikan ke nilai yang lebih masuk akal.

Apa yang Sudah Kita Pelajari?#

Sekarang ketika melihat sebuah elemen, kita tidak lagi hanya melihat:

1
teks
2
gambar
3
form

Kita juga bisa membayangkan box di belakangnya:

1
margin
2
└── border
3
    └── padding
4
        └── content

Kita tahu:

• content adalah area isi;
• padding memberi ruang antara content dan border;
• border mengelilingi area content dan padding;
• margin memberi ruang di luar border.

Kita juga sudah melihat kenapa:

1
width: 300px;

tidak selalu berarti ukuran sampai border tepat 300px pada default content-box.

Dan kita sudah mengenal:

1
box-sizing: border-box;

yang membuat perhitungan ukuran sering terasa lebih intuitif.

Halaman profil kita sekarang juga mulai terlihat lebih terstruktur.

Tapi ada masalah berikutnya.

Selanjutnya: Bagaimana Mengatur Elemen Berdampingan?#

Sejauh ini kita banyak mengatur tampilan sebuah elemen secara individual.

Tapi bagaimana kalau kita ingin:

1
nama situs        navigasi

berada dalam satu baris?

Atau:

1
foto profil    informasi profil

berdampingan?

Atau beberapa bagian disusun dengan jarak yang rapi tanpa mengatur posisi satu per satu?

Kita membutuhkan cara untuk mengatur hubungan layout antar-elemen.

Dan salah satu alat CSS yang paling berguna untuk itu adalah:

Flexbox.

Itulah yang akan kita gunakan pada artikel berikutnya.