ID (Indonesia) Translation

CSS - Box Sizing

Halo teman-teman pemula pengembang web! Hari ini, kita akan mendalaminya dunia yang menarik dari CSS box sizing. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda melalui konsep penting ini yang akan membuat hidup Anda jauh lebih mudah saat mendesain layout web. Percayalah, setelah Anda memahami 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 total dari suatu elemen dihitung. Ini adalah perubahan besar dalam desain web, dan saya sangat gembira untuk menunjukkan kepada Anda mengapa!

Dalam model kotak CSS tradisional, ketika Anda menetapkan lebar dan tinggi untuk suatu elemen, ruang yang sebenarnya dipakai olehnya bisa lebih besar karena padding dan border. Ini bisa menyebabkan masalah layout yang tak terduga, seperti mencoba memasukkan kotak besar ke lemari kecil – itu saja tidak bisa!

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

Nilai yang Mungkin

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

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 aksi 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 total elemen akan menjadi 250px (200px + 20px padding di setiap sisi + 5px border di setiap sisi), dan tinggi total akan menjadi 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 total 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 – tanpa kesurangan!

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 ini 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:

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

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

Contoh

Mari kita gabungkan semua ini 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 menjadi 50% dan menambahkan padding. Dengan menggunakan box-sizing: border-box, kita memastikan bahwa kolom akan pas berdampingan, bahkan dengan padding yang ditambahkan. Tanpa ini, kolom akan meluap keluar kotaknya!

Mari kitauraikan ini:

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

Ini hanya permulaan dari kekuatan box-sizing. Selama Anda terus menjalankan perjalanan pengembangan web Anda, Anda akan menemukan banyak situasi di mana properti ini menyelamatkan hari.

Ingat, desain web tentang menciptakan layout yang harmonis, dan box-sizing adalah senjata rahasia Anda untuk mencapai keselarasan ini. Itu seperti memiliki lemari yang teratur baik – segala sesuatu pas sepenuhnya, dan tak ada kejutan yang menyusahkan!

Dalam tahun pengajaran saya, saya telah melihat banyak "aha!" saat murid-muridku memahami konsep box-sizing. Itu seperti momen magis saat layout tiba-tiba menjadi masuk akal, dan frustasi karena overflow yang tak terduga menghilang.

Jadi, teruslatih, coba dengan berbagai layout, dan jangan khawatir untuk bermain dengan box-sizing. Sebelum Anda sadari, Anda akan menciptakan desain pixel-perfect dengan mudah!

Selamat coding, para ahli web masa depan!

Credits: Image by storyset