Model Kotak

Podcast CSS - 001: Model Box

Misalnya Anda memiliki sedikit HTML ini:

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

Kemudian tulis CSS ini untuknya:

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

Konten akhirnya menjadi lebar 142px, bukan 100px yang Anda tentukan, dan ternyata agar menonjol dari elemen Anda. Mengapa demikian?

Model kotak adalah fondasi inti CSS. Memahami bagaimana model kotak bagaimana pengaruhnya terhadap aspek lain CSS, dan yang penting, bagaimana Anda dapat mengontrolnya, dapat membantu Anda menulis CSS yang lebih mudah diprediksi.

Penting untuk diingat bahwa segala sesuatu yang ditampilkan oleh CSS adalah sebuah kotak, bahkan jika hanya beberapa teks, atau memiliki border-radius yang membuatnya terlihat seperti lingkaran.

Konten dan ukuran

Kotak memiliki perilaku yang berbeda berdasarkan nilai display-nya, kumpulan-nya dimensi, dan konten yang ada di dalamnya. Konten ini bisa berupa teks biasa, atau lebih banyak kotak yang dihasilkan oleh elemen turunan. Apa pun itu, konten memengaruhi ukuran secara {i>default<i}.

Anda dapat mengontrolnya menggunakan ukuran eksternal, atau Anda dapat menggunakan ukuran intrinsik agar browser dapat mengambil keputusan berdasarkan ukuran konten.

Berikut adalah demo dasar yang menjelaskan perbedaannya:

Demo tersebut berisi kata-kata "CSS keren" dalam kotak dengan dimensi tetap dan garis batas yang tebal. Karena kotak memiliki lebar yang ditentukan, maka ukurannya secara eksternal. Artinya, kontrol ini mengontrol ukuran konten turunannya. Namun, kata "bagus" terlalu besar untuk kotak, sehingga melebihi kotak induk kotak batas (selengkapnya tentang hal ini akan dibahas nanti). Salah satu cara untuk mencegah {i>overflow<i} ini adalah dengan kotak itu diukur secara intrinsik, dengan tidak mengatur lebar, atau dalam hal ini, menetapkan width ke min-content. Kata kunci min-content memberi tahu kotak untuk selebar minimum intrinsik kontennya (kata "luar biasa"). Hal ini membuat kotak terlihat pas di sekitar teks.

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

Aktifkan dan nonaktifkan ukuran intrinsik untuk melihat bagaimana ukuran eksternal memberi Anda lebih banyak manfaat menggunakan ukuran ekstrinsik dan ukuran intrinsik akan memberikan lebih banyak informasi kontrol. Untuk melihat efeknya, tambahkan beberapa kalimat teks ke kartu. Jika elemen ini memiliki ukuran ekstrinsik, ada batas berapa banyak konten yang dapat tambahkan sebelum meluap, tapi itu tidak terjadi ketika ukuran intrinsik diaktifkan.

Secara default, elemen ini memiliki kumpulan width dan height masing-masing 400px. Dimensi ini memberikan batas ketat untuk segala sesuatu yang ada di dalam elemen, diterima kecuali jika konten terlalu besar untuk kotak. Anda dapat melihat cara kerjanya dengan mengubah {i>caption<i} di bawah gambar bunga menjadi sesuatu yang melebihi tinggi kotak.

Istilah kunci: Overflow terjadi jika konten terlalu besar untuk kotak tempatnya berada. 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 kotak mengubah ukurannya sesuai dengan kontennya.

Penting untuk diingat bahwa ukuran intrinsik adalah ukuran {i>default<i} browser dan biasanya memberikan lebih banyak fleksibilitas daripada ukuran ekstrinsik.

Area model boks

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

Kotak konten adalah area tempat konten berada. Konten dapat mengontrol ukuran induknya, jadi ini 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 dalam ruang yang dihasilkannya. Jika kotak memiliki kumpulan aturan tambahan, seperti overflow: auto atau overflow: scroll, scrollbar juga menempati ruang ini.

Kotak batas mengelilingi kotak padding, dan ruangnya ditentukan oleh elemen Nilai border, yang membuat {i>frame<i} visual untuk elemen tersebut. Batas batas elemen adalah yang dapat Anda lihat.

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

Analogi yang berguna

Model kotak ini rumit untuk dipahami, jadi berikut adalah analogi untuk apa yang Anda pelajari sejauh ini.

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

• Kotak konten adalah karya seni.
• Kotak padding adalah papan penyangga berwarna putih, di antara bingkai dan ilustrasi.
• Kotak pembatas adalah bingkai, yang memberikan batas literal untuk karya seni.
• Kotak margin adalah ruang antar-bingkai.
• Bayangan menempati ruang yang sama dengan kotak margin.

Men-debug model kotak

Browser DevTools memberikan visualisasi model kotak kotak yang dipilih penghitungan, yang dapat membantu Anda memahami cara kerja model boks dan bagaimana model tersebut mempengaruhi situs web yang sedang Anda kerjakan.

Cobalah di browser Anda sendiri:

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

Mengontrol model kotak

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

Setiap {i>browser<i} menerapkan {i>style sheet<i} agen pengguna ke dokumen HTML yang mendefinisikan bagaimana elemen seharusnya terlihat dan berperilaku jika mereka tidak memiliki CSS yang ditetapkan. CSS di spreadsheet gaya agen pengguna bervariasi di antara browser, tetapi memberikan secara {i>default<i} untuk membuat konten lebih mudah dibaca.

Satu properti yang digunakan oleh style sheet agen pengguna menetapkan display default kotak. Sebagai 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 menghormatinya. Dengan inline-block, elemen lain mengikuti margin blok, tetapi elemen pertama 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.

Lembar gaya agen pengguna juga menetapkan box-sizing, yang memberi tahu kotak cara menghitung ukuran kotaknya. Secara default, semua elemen memiliki agen pengguna berikut gaya: box-sizing: content-box;. Ini berarti bahwa ketika Anda menetapkan dimensi seperti sebagai width dan height, dimensi tersebut berlaku untuk kotak konten. Jika Anda lalu tetapkan padding dan border, nilai ini akan ditambahkan ke ukuran.

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, serta padding dan border di kedua sisi ditambahkan ke itu. 200 px untuk konten + 40 px padding + 20 px batas menjadi total 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 alih-alih kotak konten. Ini berarti border dan padding kita mendapatkan didorong masuk, jadi jika Anda menyetel .my-box menjadi lebar 200px, lebarnya akan benar-benar dirender dengan lebar 200px.

Lihat cara kerjanya dalam demo interaktif berikut. Saat Anda mengaktifkan/menonaktifkan Nilai box-sizing, area biru menunjukkan CSS mana yang diterapkan di dalam .

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

Aturan CSS ini memilih setiap elemen dalam dokumen dan setiap elemen pseudo ::before dan ::after, serta menerapkan box-sizing: border-box. Ini berarti bahwa setiap elemen sekarang menggunakan model kotak alternatif ini.

Karena model kotak alternatif bisa lebih mudah diprediksi, developer sering menambahkan aturan ini untuk reset dan normalizer, seperti yang satu ini.

Resource

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

Stylesheet agen pengguna

• Chromium
• Firefox
• Webkit