Ukuran Kotak: Content-Box vs Border-Box
Pahami cara box-sizing mengubah perhitungan width dan height agar menyertakan padding dan border.
Ukuran Kotak: Content-Box vs Border-Box adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Masalah box-sizing
Secara default, CSS menetapkan width hanya pada area konten. Penambahan padding atau border memperbesar ukuran aktual elemen yang ditampilkan, sehingga membingungkan dan rentan menyebabkan kesalahan.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Bawaan)
box-sizing: content-box adalah nilai bawaan. width dan height berlaku hanya untuk konten. Padding dan border ditambahkan di luar, sehingga elemen menjadi lebih besar daripada ukuran yang ditetapkan.
border-box
Dengan box-sizing: border-box, width dan height mencakup konten + padding + border. Elemen tetap persis sebesar ukuran yang dideklarasikan, terlepas dari padding atau border.
<div class="box">Exactly 200px rendered width</div>
Pengaturan Ulang Universal untuk border-box
Terapkan border-box secara global menggunakan pengaturan ulang universal yang direkomendasikan:
<div class="demo-box">Width stays exactly 200px</div>
Mengapa menggunakan inherit, bukan *
Pola alternatif memungkinkan komponen menimpa pengaturan box-sizing bila diperlukan:
<div class="demo-box">Inherited border-box sizing</div>
Lebar Persentase + Padding
Manfaat praktis utama border-box adalah pada lebar persentase. Elemen width: 50% dengan padding 20px tetap tepat 50% dari elemen induknya tanpa meluap.
<div class="col">50% wide column with padding, no overflow</div>
border-box Tidak Menyertakan margin
Bahkan dengan border-box, margin tidak disertakan dalam lebar yang dideklarasikan. Margin selalu menambahkan ruang di luar elemen, di luar dimensinya yang ditetapkan.
Sejarah: Mengapa content-box Menjadi Bawaan?
Secara historis, peramban memiliki perbedaan dalam model kotak. W3C menstandardisasi content-box, tetapi IE menggunakan border-box. CSS modern menggunakan content-box sebagai bawaan untuk mematuhi standar W3C, tetapi hampir semua proyek mengubahnya menjadi border-box.
Memeriksa Model Kotak di DevTools
Di panel Elemen pada Chrome DevTools, terdapat diagram model kotak yang menampilkan dimensi konten, padding, border, dan margin secara tepat. Ini adalah cara tercepat untuk mendiagnosis masalah ukuran.
Grid dan Flexbox Menggunakan border-box Secara Internal
CSS Grid dan Flexbox selalu menentukan ukuran jalur dan item menggunakan semantik border-box, terlepas dari pengaturan box-sizing elemen itu sendiri. Hal ini membuat perhitungan ukuran tetap dapat diprediksi.
min/max dengan border-box
min-width, max-width, min-height, dan max-height bekerja dengan cara yang sama seperti width—semuanya mencakup padding dan border saat border-box aktif.
Pemeriksaan Singkat
Dengan box-sizing: border-box, elemen yang dideklarasikan sebagai width: 300px; padding: 30px; memiliki lebar area konten sebesar:
Ringkasan
box-sizing: border-box mencakup padding dan border dalam lebar yang dideklarasikan, sehingga mencegah pertumbuhan ukuran yang tidak terduga. Terapkan secara global dengan *, *::before, *::after { box-sizing: border-box }. Margin tidak pernah disertakan dalam kedua model kotak.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Ukuran Kotak: Content-Box vs Border-Box” gratis?
Ya — teks lengkap “Ukuran Kotak: Content-Box vs Border-Box” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Ukuran Kotak: Content-Box vs Border-Box”?
Pahami cara box-sizing mengubah perhitungan width dan height agar menyertakan padding dan border. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Ukuran Kotak: Content-Box vs Border-Box” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Memahami Lebar, Tinggi, Margin, dan Padding
- Gaya, Lebar, dan Warna Batas
- Ukuran Kotak: Content-Box vs Border-Box
- Outline dan Box-Shadow