Inset Properties

Properti position menentukan dari mana sebuah elemen diukur, tetapi properti offsetlah yang benar-benar meletakkannya. Empat properti top , right, bottom, dan left mengikat tepi elemen ke sisi acuannya, dan inset merangkum keempatnya dalam satu deklarasi. Tanpa penguasaan properti-properti ini, pengetahuan tentang absolute, fixed, dan sticky belum bisa diterjemahkan menjadi tata letak nyata. Pada Chapter ini kita berlatih membaca dan menulis keempat properti, memakai shorthand inset, serta mengenal versi logisnya yang mengikuti arah penulisan teks.

Empat Properti Offset #

Offset diukur dari sisi yang sama nama pada containing block: top: 20px berarti tepi atas elemen berjarak 20px dari tepi atas acuan, dan seterusnya. Nilainya boleh panjang (px, em, %), bisa juga kata kunci auto. Angka nol ditulis tanpa satuan — top: 0 sah dan setara dengan top: 0px.

Perhatikan pasangan yang berlawanan arah: top dan bottom menarik elemen dari dua sisi yang bertolak belakang, demikian pula left dan right. Bila dua sisi berlawanan diikat sekaligus dan width dibiarkan auto, lebar elemen menyesuaikan mengisi sisa ruang — mekanisme yang kita hitung pada contoh di bawah.

Shorthand Inset #

Shorthand inset menerima satu hingga empat nilai dengan urutan searah jarum jam: atas, kanan, bawah, kiri. Satu nilai berlaku untuk keempat sisi; dua nilai dipakai untuk pasangan atas-bawah lalu kiri-kanan; empat nilai menetapkan setiap sisi secara terpisah.

.arena {
  position: relative;
  width: 400px;
  height: 160px;
}
.panel-empat {
  position: absolute;
  inset: 10px 20px 30px 40px;
}
.panel-dua {
  position: absolute;
  inset: 12px 24px;
}

<div class="arena">
  <div class="panel-empat">inset: 10px 20px 30px 40px</div>
</div>

Hasil di Browser:

Panel dengan inset: 10px 20px 30px 40px dicatat computed inset:
10px 20px 30px 40px (atas, kanan, bawah, kiri). Karena tepi kiri
berjarak 40px dan tepi kanan berjarak 20px pada arena selebar 400px,
lebar panel otomatis 340px. Panel dengan inset: 12px 24px dihitung
sebagai atas-bawah 12px dan kiri-kanan 24px (computed inset: 12px
24px).

Mari kita telaah deklarasinya baris demi baris:

1. Baris 2–4 (arena): acuan harus positioned, karena itu arena diberi position: relative beserta ukuran tetap sebagai patokan hitungan.
2. Baris 7–8 (inset: 10px 20px 30px 40px): panel terikat di keempat sisi sekaligus — 10px dari atas, 20px dari kanan, 30px dari bawah, 40px dari kiri.
3. Lebar otomatis: tanpa deklarasi width, lebar panel = 400 − 20 − 40 = 340px. Pengikatan dua sisi berlawanan “merentang” elemen, dan pola ini menjadi dasar overlay selebar viewport pada Chapter berikutnya.
4. inset: 12px 24px: dua nilai berarti pasangan — atas dan bawah 12px, kiri dan kanan 24px. Nilai yang berulang inilah alasan urutan jarum jam perlu dihafalkan.

Nilai Auto dan Inset Logis #

Nilai auto berarti sisi itu tidak diikat. Elemen absolute dengan top: auto; bottom: 20px tidak diukur dari atas sama sekali; browser meletakkannya di posisi statisnya secara vertikal, lalu mengikatnya 20px dari bawah. Bedakan dengan inset: 0 yang mengikat keempat sisi ke nol — elemen memenuhi acuan sepenuhnya. Keduanya sering tertukar ketika kita bermaksud “menempel di bawah” tetapi malah menulis nol di semua sisi.

Versi logis offset mengikuti arah aliran teks: inset-inline-start berarti sisi awal baris teks, yang pada teks kiri-ke-kanan sama dengan left dan pada teks kanan-ke-kiri menjadi right. Pasangannya meliputi inset-inline-end, inset-block-start, dan inset-block-end, beserta shorthand inset-inline dan inset-block. Pendekatan ini menyiapkan tata letak untuk konten multi-bahasa; dasarnya telah kita sentuh pada Chapter Logical Properties .