CSS - Inset: Panduan Lengkap untuk Penempatan Elemen

Hai teman-teman, para maestro CSS masa depan! Hari ini, kita akan mandar ke 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, pada akhir tutorial ini, Anda akan menjadi ahli dalam menempatkan elemen dengan inset!

Apa Itu Properti CSS Inset?

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

Nilai dan Sintaks yang Mungkin

Mari kitauraikan nilai dan sintaks yang mungkin untuk properti inset. Jangan khawatir jika awalnya terlihat menakutkan – kita akan membahas setiap satu secara berurutan!

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

Sintaks dasar untuk properti inset tampak seperti ini:

selector {
inset: value;
}

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

CSS Inset - Empat Nilai Panjang

Ketika Anda memberikan empat nilai ke properti inset, Anda menetapkan posisi atas, kanan, bawah, dan kiri sekaligus. Itu seperti memberikan 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 pengelolanya. Itu seperti memberikan elemen Anda petunjuk sangat spesifik tentang di mana untuk berdiri!

CSS Inset - Tiga Nilai Panjang

Apa yang terjadi ketika kita hanya menggunakan tiga nilai? CSS menjadi cerdas! Itu menganggap nilai kiri harus sama seperti nilai kanan.

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

Ini setara dengan inset: 10px 20px 30px 20px. Kotak kami sekarang 10px dari atas, 20px dari kanan dan kiri, dan 30px dari bawah. Itu seperti mengatakan kepada elemen Anda untuk "squeezing" sedikit di sisi!

CSS Inset - Dua Nilai Panjang

Dengan dua nilai, CSS menjadi lebih cerdas. 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. Kotak kami sekarang 10px dari atas dan bawah, dan 20px dari kiri dan kanan. Itu seperti memberikan 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. Kotak kami sekarang memiliki jarak 10px di semua sisi dari elemen pengelolanya.

CSS Inset - Nilai Persentase

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

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

Dalam kasus ini, kotak kami akan ditempatkan 10% dari semua sisi kotak pengelolanya. Jika kotak pengelola tumbuh atau menyusut, penempatan akan disesuaikan secara bersamaan. Itu seperti memberikan elemen Anda busa personal berbasis persentase!

CSS Inset - Nilai campuran

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

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

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

CSS Inset - Nilai Auto

Nilai auto sangat berguna saat 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 mengatakan kepada 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 Anda 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, teman-teman! Anda baru saja mengambil tur besar dari properti CSS inset. Dari sintaks dasar ke berbagai kasus penggunaannya, Anda sekarang memiliki kekuatan untuk menempatkan elemen dengan presisi dan fleksibilitas.

Ingat, kunci untuk menjadi ahli CSS adalah latihan. Jadi, teruskan, coba contoh ini, campurkan dan seimbangkan nilai, dan lihat bagaimana inset dapat mengubah layout Anda. Sebelum Anda tahu, Anda akan menempatkan elemen dalam tidur Anda!

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

Credits: Image by storyset