Model Kotak

The CSS Podcast - 001: The Box Model

Misalnya, Anda memiliki cuplikan HTML ini:

<p>I am a paragraph of text that has a few words in it.</p>

Kemudian, Anda menulis CSS ini untuknya:

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Konten akan memiliki lebar 142 px, bukan 100 px yang Anda tentukan, dan konten tersebut akan keluar dari elemen Anda. Mengapa demikian?

Model kotak adalah fondasi inti CSS. Memahami cara kerja model kotak, cara kerjanya dipengaruhi oleh aspek CSS lainnya, dan yang terpenting, cara mengontrolnya, dapat membantu Anda menulis CSS yang lebih mudah diprediksi.

Penting untuk diingat bahwa semua yang ditampilkan oleh CSS adalah kotak, meskipun hanya berupa teks, atau memiliki border-radius yang membuatnya terlihat seperti lingkaran.

Konten dan ukuran

Kotak memiliki perilaku yang berbeda berdasarkan nilai display, dimensi yang ditetapkan, dan konten yang ada di dalamnya. Konten ini dapat berupa teks biasa, atau lebih banyak kotak yang dihasilkan oleh elemen turunan. Bagaimanapun, konten memengaruhi ukuran kotak secara default.

Anda dapat mengontrolnya menggunakan pengaturan ukuran ekstrinsik, atau Anda dapat menggunakan pengaturan ukuran intrinsik agar browser membuat keputusan untuk Anda berdasarkan ukuran konten.

Berikut demo dasar yang menjelaskan perbedaannya:

Demo ini memiliki kata-kata "CSS is awesome" dalam kotak dengan dimensi tetap dan batas tebal. Karena kotak memiliki lebar yang ditentukan, ukurannya ditentukan secara ekstrinsik. Artinya, ia mengontrol ukuran konten turunannya. Namun, kata "awesome" terlalu besar untuk kotak, sehingga meluap di luar kotak batas kotak induk (akan dibahas lebih lanjut nanti). Salah satu cara untuk mencegah luapan ini adalah dengan membiarkan kotak berukuran intrinsik dengan tidak menyetel lebar, atau dalam kasus ini, menyetel width ke min-content. Kata kunci min-content memberi tahu kotak agar hanya selebar lebar minimum intrinsik kontennya (kata "awesome"). Dengan begitu, kotak akan pas dengan teks.

Berikut adalah contoh yang lebih kompleks yang menunjukkan dampak berbagai ukuran pada konten nyata:

Aktifkan dan nonaktifkan ukuran intrinsik untuk melihat bagaimana ukuran ekstrinsik memberi Anda lebih banyak kontrol dengan ukuran ekstrinsik dan ukuran intrinsik memberi konten lebih banyak kontrol. Untuk melihat efeknya, tambahkan beberapa kalimat teks ke kartu. Jika elemen ini memiliki ukuran ekstrinsik, ada batasan jumlah konten yang dapat Anda tambahkan sebelum meluap, tetapi hal itu tidak terjadi saat ukuran intrinsik diaktifkan.

Secara default, elemen ini memiliki width dan height yang ditetapkan masing-masing 400px. Dimensi ini memberikan batas ketat untuk semua yang ada di dalam elemen, yang akan dipatuhi kecuali jika konten terlalu besar untuk kotak. Anda dapat melihatnya secara langsung dengan mengubah teks di bawah gambar bunga menjadi sesuatu yang melebihi tinggi kotak.

Istilah penting: Overflow terjadi saat konten terlalu besar untuk kotak tempat konten berada. Anda dapat mengelola cara elemen menangani konten yang meluap menggunakan properti overflow.

Beralih ke ukuran intrinsik memungkinkan browser membuat keputusan untuk Anda berdasarkan ukuran konten kotak. Hal ini membuat overflow lebih kecil kemungkinannya karena kotak mengubah ukuran dengan kontennya.

Penting untuk diingat bahwa ukuran intrinsik adalah perilaku default browser, dan biasanya memberikan fleksibilitas yang jauh lebih besar daripada ukuran ekstrinsik.

Area model kotak

Kotak terdiri dari area model kotak yang berbeda-beda dan semuanya melakukan tugas tertentu.

Kotak konten adalah area tempat konten berada. Konten dapat mengontrol ukuran induknya, sehingga area ini biasanya memiliki ukuran yang paling bervariasi.

Kotak padding mengelilingi kotak konten dan merupakan ruang yang dibuat oleh properti padding. Karena padding berada di dalam kotak, latar belakang kotak terlihat di ruang yang dibuatnya. Jika kotak memiliki aturan overflow yang ditetapkan, seperti overflow: auto atau overflow: scroll, scrollbar juga menempati ruang ini.

Kotak batas mengelilingi kotak padding, dan ruangnya ditentukan oleh nilai border, yang membuat bingkai visual untuk elemen. Tepi batas elemen adalah batas dari apa yang dapat Anda lihat.

Area terakhir, kotak margin, adalah ruang di sekitar kotak Anda, yang ditentukan oleh aturan margin kotak. Properti seperti outline dan box-shadow juga menempati ruang ini karena dilukis di atas elemen dan tidak memengaruhi ukuran kotak. Mengubah outline-width 200px kotak Anda tidak akan mengubah apa pun di dalam tepi batas.

Analogi yang berguna

Model kotak sulit dipahami, jadi berikut analogi untuk apa yang telah Anda pelajari sejauh ini.

Dalam diagram ini, Anda memiliki tiga bingkai foto yang dipasang bersebelahan di dinding. Elemen gambar berbingkai sesuai dengan model kotak sebagai berikut:

• Kotak konten adalah karya seni.
• Kotak padding adalah papan pemasangan putih, di antara bingkai dan karya seni.
• Kotak batas adalah bingkai, yang memberikan batas literal untuk karya seni.
• Kotak margin adalah ruang di antara frame.
• Bayangan menempati ruang yang sama dengan kotak margin.

Men-debug model kotak

Alat developer browser memberikan visualisasi perhitungan model kotak dari kotak yang dipilih, yang dapat membantu Anda memahami cara kerja model kotak dan pengaruhnya terhadap situs yang sedang Anda kerjakan.

Untuk mencobanya di Chrome:

1. Buka DevTools.
2. Pilih elemen.
3. Tampilkan debugger model kotak.

Mengontrol model kotak

Untuk memahami cara mengontrol model kotak, Anda harus memahami terlebih dahulu apa yang terjadi di browser Anda.

Setiap browser menerapkan lembar gaya agen pengguna ke dokumen HTML. Lembar gaya menentukan tampilan dan perilaku elemen, jika elemen tidak diberi CSS yang ditentukan. CSS dalam lembar gaya agen pengguna bervariasi menurut browser, tetapi setiap browser memiliki setelan default yang membuat konten lebih mudah dibaca.

Lembar gaya agen pengguna menetapkan nilai default untuk elemen yang menggunakan display. Misalnya, nilai display default elemen <div> adalah block, <li> memiliki nilai display default list-item, dan <span> memiliki nilai display default inline.

Elemen inline memiliki margin blok, tetapi elemen lain tidak menggunakannya. Dengan inline-block, elemen lain mematuhi margin blok, tetapi elemen pertama mempertahankan sebagian besar perilaku yang sama seperti yang dimiliki sebagai elemen inline. Item block mengisi ruang inline yang tersedia secara default, sedangkan elemen inline dan inline-block hanya sebesar kontennya.

Lembar gaya agen pengguna juga menetapkan default untuk box-sizing, yang memberi tahu kotak cara menghitung ukurannya. Secara default, semua elemen disetel ke box-sizing: content-box;. Artinya, saat Anda menetapkan dimensi seperti width dan height, dimensi tersebut berlaku untuk kotak konten. Jika Anda kemudian menetapkan padding dan border, nilai ini akan ditambahkan ke ukuran kotak konten.

Periksa pemahaman Anda

Uji pengetahuan Anda tentang properti yang memengaruhi ukuran model kotak.

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

Lebar sebenarnya kotak ini adalah 260 piksel. Karena CSS menggunakan box-sizing: content-box default, lebar yang diterapkan adalah lebar konten, dan padding serta border di kedua sisi ditambahkan ke lebar tersebut. 200 piksel untuk konten + 40 piksel padding + 20 piksel batas menghasilkan total lebar yang terlihat sebesar 260 piksel.

Anda dapat mengubahnya dengan menentukan ukuran border-box:

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

Model kotak alternatif ini memberi tahu CSS untuk menerapkan width ke kotak batas, bukan kotak konten. Artinya, border dan padding kita akan didorong masuk, jadi saat Anda menyetel .my-box menjadi lebar 200px, .my-box akan dirender dengan lebar 200px.

Lihat cara kerjanya dalam demo interaktif berikut. Saat Anda mengubah nilai box-sizing, area biru menunjukkan CSS mana yang diterapkan di dalam kotak.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Aturan CSS ini memilih setiap elemen dalam dokumen dan setiap elemen semu ::before dan ::after serta menerapkan box-sizing: border-box. Artinya, setiap elemen kini menggunakan model kotak alternatif ini.

Karena model kotak alternatif dapat lebih mudah diprediksi, developer sering menambahkan aturan ini ke reset dan normalizer, seperti ini.

Resource

• Pengantar model kotak
• Apa yang dimaksud dengan alat developer browser?

Stylesheet agen pengguna

• Chromium
• Firefox
• Webkit