CSS - Box Sizing

Hai there, para web developer yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik CSS box sizing. Seperti guru komputer tetangga yang ramah, saya disini untuk mengorbit anda melalui konsep penting ini yang akan membuat hidup anda jauh lebih mudah saat merancang layout web. Percayalah, sekali Anda menguasai ini, Anda akan bertanya-tanya bagaimana Anda bisa hidup tanpanya!

Properti CSS Box Sizing

Mari mulai dari dasar. Properti CSS box-sizing adalah seperti tongkat魔法 yang menentukan bagaimana lebar dan tinggi keseluruhan elemen dihitung. Ini adalah perubahan besar dalam desain web, dan saya gembira untuk menunjukkan kepada Anda mengapa!

Dalam model kotak CSS tradisional, saat Anda menetapkan lebar dan tinggi untuk elemen, ruang yang sebenarnya dipenuhi bisa lebih besar karena padding dan border. Ini bisa menyebabkan masalah layout yang tak terduga, seperti mencoba memasukkan kotak besar ke lemari kecil - itu hanya tidak bisa!

Di sini box-sizing datang untuk menyelamatkan. Ini memungkinkan kita mengendalikan bagaimana browser menghitung ukuran keseluruhan elemen.

Nilai Yang Mungkin

Properti box-sizing bisa mengambil tiga nilai yang mungkin. Mari kitauraikan ini:

Nilai	Deskripsi
content-box	Ini adalah nilai default. Lebar dan tinggi hanya berlaku untuk konten elemen.
border-box	Lebar dan tinggi termasuk konten, padding, dan border.
inherit	Elemen mewarisi nilai box-sizing dari elemen induknya.

Sekarang, mari kita lihat ini dalam tindakan dengan beberapa contoh!

Content-Box (Default)

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: content-box;
}

Dalam contoh ini, lebar keseluruhan elemen akan 250px (200px + 20px padding di setiap sisi + 5px border di setiap sisi), dan tinggi keseluruhan akan 150px. Itu seperti memesan pizza kecil dan akhirnya mendapat yang besar - tak terduga, kan?

Border-Box

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}

Sekarang, dengan border-box, lebar dan tinggi keseluruhan akan tepat 200px dan 100px, masing-masing. Padding dan border termasuk dalam dimensi ini. Itu seperti memesan pizza dan mendapat tepat apa yang Anda minta - tak ada kejutan!

Terapkan Pada

Properti box-sizing berlaku untuk semua elemen yang menerima lebar atau tinggi. Ini termasuk:

• Elemen tingkat blok (seperti <div>, <p>, <h1>, dll.)
• Elemen inline-block
• Sel tabel dan elemen table-caption

Perlu diketahui bahwa itu tidak berlaku untuk elemen inline kecuali Anda mengubah properti displaynya.

Sintaks DOM

Dalam JavaScript, Anda dapat mengakses dan mengubah properti box-sizing menggunakan DOM. Ini adalah cara:

// Dapatkan nilai box-sizing
let boxSizing = element.style.boxSizing;

// Set nilai box-sizing
element.style.boxSizing = 'border-box';

Contoh

Mari kita gabungkan semuanya dengan contoh praktis. Bayangkan kita membuat layout sederhana dengan dua kolom berdampingan.

<div class="container">
<div class="column">Kolom 1</div>
<div class="column">Kolom 2</div>
</div>

.container {
width: 100%;
}

.column {
width: 50%;
padding: 20px;
float: left;
box-sizing: border-box;
}

Dalam contoh ini, kita menetapkan lebar setiap kolom ke 50% dan menambahkan padding. Dengan menggunakan box-sizing: border-box, kita memastikan bahwa kolom akan muat sempurna berdampingan, bahkan dengan padding yang ditambahkan. Tanpa itu, kolom akan meluap dari wadahnya!

mariuraikan ini:

1. Kita menetapkan kontainer ke 100% lebar untuk memenuhi keseluruhan lebar induknya.
2. Setiap kolom diatur ke 50% lebar, jadi mereka seharusnya duduk berdampingan.
3. Kita menambahkan 20px padding ke setiap kolom untuk memberikan ruang.
4. Dengan menggunakan box-sizing: border-box, padding dimasukkan dalam 50% lebar, mencegah meluap.

Ini hanya ujung gunung es saat ini terkait kekuatan box-sizing. Saat Anda terus melanjutkan perjalanan pengembangan web Anda, Anda akan menemukan banyak situasi di mana properti ini menyelamatkan hari.

Ingat, desain web adalah tentang menciptakan layout yang harmonis, dan box-sizing adalah senjata rahasia Anda dalam mencapai keselarasan ini. Itu seperti memiliki lemari yang teratur baik - segalanya muat dengan sempurna, dan tak ada kejutan buruk!

Dalam tahun-tahun mengajar saya, saya telah melihat banyak "aha!" saat siswa menguasai konsep box-sizing. Itu adalah saat ajaib saat layout tiba-tiba membuat sense, dan frustasi meluap yang tak terduga menghilang.

Jadi, terus latih, eksperimen dengan layout yang berbeda, dan jangan takut untuk bermain dengan box-sizing. Sebelum Anda tahu, Anda akan membuat desain piksel yang sempurna dengan mudah!

Selamat coding, para web wizard masa depan!

Credits: Image by storyset