Model Kotak

Podcast CSS - 001: Model Kotak

Misalnya Anda memiliki kode HTML ini:

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

Kemudian tulis CSS ini:

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

Konten berakhir selebar 142 piksel, bukan 100 piksel yang Anda tentukan, dan memisahkan elemen Anda. Mengapa demikian?

Model kotak adalah fondasi inti CSS. Dengan memahami cara kerja model kotak, pengaruhnya terhadap aspek CSS lainnya, dan yang terpenting, cara mengontrolnya, Anda dapat menulis CSS yang lebih dapat diprediksi.

Penting untuk diingat bahwa semua yang ditampilkan oleh CSS adalah kotak, meskipun hanya beberapa 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 dikandungnya. Konten ini bisa berupa teks biasa, atau lebih banyak kotak yang dihasilkan oleh elemen turunan. Apa pun itu, konten memengaruhi ukuran kotak secara default.

Anda dapat mengontrolnya menggunakan ukuran ekstrinsik, atau Anda dapat menggunakan ukuran intrinsik untuk memungkinkan browser mengambil keputusan berdasarkan ukuran konten.

Berikut ini demo dasar yang menjelaskan perbedaannya:

Demo ini berisi kata "CSS luar biasa" dalam kotak dengan dimensi tetap dan batas tebal. Karena memiliki lebar yang ditentukan, kotak ini memiliki ukuran ekstrinsik. Artinya, ukuran tersebut mengontrol ukuran konten turunannya. Namun, kata "awesome" terlalu besar untuk kotak tersebut, sehingga muncul di luar kotak batas kotak induk (selengkapnya tentang hal ini akan dibahas nanti). Salah satu cara untuk mencegah tambahan ini adalah dengan membiarkan ukuran kotak secara intrinsik tidak disetel dengan lebar, atau dalam hal ini, menyetel width ke min-content. Kata kunci min-content memberi tahu kotak agar hanya selebar lebar minimum intrinsik kontennya (kata "awesome"). Ini memungkinkan kotak pas di sekitar teks.

Berikut adalah contoh 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 batas jumlah konten yang dapat Anda tambahkan sebelum melebihi batas, tetapi hal ini tidak terjadi jika ukuran intrinsik diaktifkan.

Secara default, elemen ini memiliki kumpulan width dan height dari 400px masing-masing. Dimensi ini memberikan batasan ketat untuk semua yang ada di dalam elemen, yang dihormati kecuali jika konten terlalu besar untuk kotak. Anda dapat melihat penerapannya dengan mengubah teks di bawah gambar bunga menjadi teks yang melebihi tinggi kotak.

Istilah kunci: Luapan terjadi saat konten terlalu besar untuk kotak isi. Anda dapat mengelola cara elemen menangani konten tambahan menggunakan properti overflow.

Beralih ke ukuran intrinsik memungkinkan browser membuat keputusan untuk Anda berdasarkan ukuran konten kotak. Hal ini mengurangi kemungkinan terjadinya overflow karena ukuran kotak berubah sesuai kontennya.

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

Area model kotak

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

Kotak konten adalah area tempat konten berada. Konten dapat mengontrol ukuran induknya, sehingga biasanya merupakan area dengan 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 ini memiliki aturan tambahan 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 frame visual untuk elemen. Tepi batas elemen adalah batas hal yang dapat Anda lihat.

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

Analogi yang berguna

Model kotak ini rumit untuk dipahami, jadi berikut adalah 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 pembatas adalah bingkai, yang memberikan batas literal untuk karya seni.
• Kotak margin adalah ruang di antara bingkai.
• Bayangan menempati ruang yang sama dengan kotak margin.

Men-debug model kotak

Browser DevTools memberikan visualisasi penghitungan model kotak yang dipilih, yang dapat membantu Anda memahami cara kerja model kotak dan pengaruhnya terhadap situs yang sedang Anda kerjakan.

Coba lakukan ini di browser Anda sendiri:

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

Mengontrol model kotak

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

Setiap browser menerapkan style sheet agen pengguna ke dokumen HTML yang menentukan tampilan dan perilaku elemen jika tidak memiliki CSS yang ditetapkan. CSS di style sheet agen pengguna bervariasi antar-browser, tetapi memberikan default yang wajar agar konten lebih mudah dibaca.

Satu properti yang lembar gaya agen pengguna menetapkan display default kotak. Misalnya, dalam alur normal, 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 mematuhinya. Dengan inline-block, elemen lain mematuhi margin blok, tetapi elemen pertama akan mempertahankan sebagian besar perilaku yang sama seperti elemen inline. Item block mengisi ruang inline yang tersedia secara default, sedangkan elemen inline dan inline-block hanya sebesar kontennya.

Sheet gaya agen pengguna juga menetapkan box-sizing, yang memberi tahu kotak cara menghitung ukuran kotaknya. Secara default, semua elemen memiliki gaya agen pengguna berikut: box-sizing: content-box;. Artinya, jika Anda menetapkan dimensi seperti width dan height, dimensi tersebut akan diterapkan ke kotak konten. Jika Anda kemudian menetapkan padding dan border, nilai ini akan ditambahkan ke ukuran kotak konten.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang ukuran model kotak yang memengaruhi properti.

.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 akan ditambahkan ke lebar tersebut. 200 px untuk konten + 40 px padding + 20 px batas membuat total lebar terlihat menjadi 260 px.

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. Ini berarti border dan padding kita didorong, sehingga saat Anda menetapkan .my-box menjadi lebar 200px, itu sebenarnya merender pada lebar 200px.

Lihat cara kerjanya dalam demo interaktif berikut. Saat Anda mengalihkan 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 pseudo ::before dan ::after, lalu menerapkan box-sizing: border-box. Ini berarti bahwa setiap elemen kini menggunakan model kotak alternatif ini.

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

Referensi

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

Stylesheet agen pengguna

• Chromium
• Firefox
• Webkit