CSS - Inset: Panduananda Terlengkap untuk Penempatan Elemen

Hai teman-teman, para maestro CSS masa depan! Hari ini, kita akan mandar ke dalam dunia yang menakjubkan dari properti inset. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, setelah tutorial ini selesai, Anda akan menjadi ahli dalam menempatkan elemen menggunakan inset!

Apa Itu Properti CSS Inset?

Sebelum kita melompat ke dalam, mari mulai dari dasar. Properti inset adalah seperti sebuah pisau Swiss Army untuk menempatkan elemen dalam CSS. Itu adalah properti singkat yang mengatur semua empat sisi posisi elemen sekaligus. Bayangkan itu seperti tongkat ajaib yang dapat menempatkan elemen Anda tepat di tempat yang Anda inginkan di halaman.

Nilai dan Sintaksis yang Mungkin

Mari kitaura nilai dan sintaksis yang mungkin untuk properti inset. Jangan khawatir jika awalnya terlihat agak menakutkan – kita akan membahas setiap salah satu langkah demi langkah!

Nilai	Deskripsi
auto	Browser menghitung inset
length	Menentukan inset dalam px, pt, cm, dll.
%	Menentukan inset dalam % dari elemen pengeliling
inherit	Mewarisi nilai dari elemen induk
initial	Mengatur properti ke nilai defaultnya
unset	Mengembalikan properti ke nilai alaminya

Sintaksis dasar untuk properti inset tampak seperti ini:

selector {
inset: value;
}

Sekarang, mari kita jelajahi berbagai cara untuk menggunakan properti ini yang kuat!

CSS Inset - Empat Nilai Panjang

Ketika Anda memberikan empat nilai ke properti inset, Anda menetapkan posisi atas, kanan, bawah, dan kiri semua sekaligus. Itu seperti memberi elemen Anda sebuah peluk besar dari semua sisi!

.box {
position: absolute;
inset: 10px 20px 30px 40px;
}

Dalam contoh ini, kita mengatakan kepada elemen .box untuk duduk 10px dari atas, 20px dari kanan, 30px dari bawah, dan 40px dari kiri elemen pengelilingnya. Itu seperti memberi elemen Anda petunjuk sangat spesifik tentang di mana harus berdiri!

CSS Inset - Tiga Nilai Panjang

Apa yang terjadi ketika kita hanya menggunakan tiga nilai? CSS menjadi cerdik! Itu mengasumsikan nilai kiri seharusnya sama seperti nilai kanan.

.box {
position: absolute;
inset: 10px 20px 30px;
}

Ini setara dengan inset: 10px 20px 30px 20px. Box kita sekarang 10px dari atas, 20px dari kanan dan kiri, dan 30px dari bawah. Itu seperti memberi elemen Anda perintah untuk "squeezing" sedikit di sisi!

CSS Inset - Dua Nilai Panjang

Dengan dua nilai, CSS menjadi lebih cerdik lagi. Nilai pertama diterapkan ke atas dan bawah, sedangkan nilai kedua diterapkan ke kiri dan kanan.

.box {
position: absolute;
inset: 10px 20px;
}

Ini sama seperti inset: 10px 20px 10px 20px. Box kita sekarang 10px dari atas dan bawah, dan 20px dari kiri dan kanan. Itu seperti memberi elemen Anda kerangka simetris!

CSS Inset - Satu Nilai Panjang

Ketika Anda menggunakan hanya satu nilai, itu diterapkan ke semua empat sisi. Itu seperti membungkus elemen Anda dalam selimut ruang yang seragam!

.box {
position: absolute;
inset: 10px;
}

Ini setara dengan inset: 10px 10px 10px 10px. Box kita sekarang memiliki jarak 10px di semua sisi dari elemen pengelilingnya.

CSS Inset - Nilai Persentase

Persentase sangat berguna ketika Anda ingin layout Anda responsif. Persentase dihitung berdasarkan dimensi elemen pengeliling.

.box {
position: absolute;
inset: 10%;
}

Dalam kasus ini, box kita akan ditempatkan 10% dari semua sisi wadahnya. Jika wadah tumbuh atau menyusut, penempatan akan disesuaikan secara bersamaan. Itu seperti memberi elemen Anda gelembung personal ruang berdasarkan persentase!

CSS Inset - Nilai Campuran

Keseruan sebenarnya dimulai ketika kita mulai mencampur nilai yang berbeda. Anda dapat menggunakan kombinasi persentase, pixel, dan bahkan kata kunci auto.

.box {
position: absolute;
inset: 10% 20px auto 5em;
}

Di sini, box kita 10% dari atas, 20px dari kanan, secara otomatis ditempatkan dari bawah (yang biasanya berarti itu akan mengambil ruang yang tersisa), dan 5em dari kiri. Itu seperti memberi elemen Anda sidik jari posisi unik!

CSS Inset - Nilai Auto

Nilai auto sangat berguna ketika Anda ingin browser menghitung inset secara otomatis.

.box {
position: absolute;
inset: auto 20px 10px;
}

Dalam contoh ini, atas akan dihitung secara otomatis, sedangkan kanan dan kiri diatur ke 20px, dan bawah ke 10px. Itu seperti memberi elemen Anda "figure out the top yourself, but stick to these rules for the other sides".

CSS Inset - Properti Terkait

Meskipun inset sangat berguna, baiklah untuk mengetahui komponen individualnya juga. Ini adalah top, right, bottom, dan left. Anda dapat menggunakan ini saat Anda memerlukan kontrol yang lebih halus.

.box {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}

Ini mencapai hasil yang sama seperti inset: 10px 20px 30px 40px, tetapi memungkinkan Anda untuk menyesuaikan setiap sisi secara individual jika diperlukan.

Kesimpulan

Dan itu adalah dia, teman-teman! Anda baru saja mengambil tur besar ke properti CSS inset. Dari sintaksis dasar hingga berbagai macam penggunaannya, Anda sekarang memiliki kekuatan untuk menempatkan elemen dengan presisi dan fleksibilitas.

Ingat, kunci untuk menjadi ahli CSS adalah praktik. Jadi, teruskan untuk mencoba contoh ini, campurkan dan seimbangkan nilai, dan lihat bagaimana inset dapat transformasi layout Anda. Sebelum Anda tahu, Anda akan menempatkan elemen secara otomatis dalam tidur Anda!

Happy coding, dan semoga elemen Anda selalu ditempatkan dengan sempurna!

Credits: Image by storyset