Inset-blok-hujung - Trik CSS | CSS Almanac 2025

inset-block-endadalah sifat CSS yang logik yang menetapkan panjang elemen yang diimbangi dalam arah blok dari hujungnya. Ia seperti menyatakan bottomkecuali titik akhirnya ditentukan oleh elemen direction, text-orientationdan writing-mode, seperti sifat logik yang lain.

Properti ini adalah sebahagian daripada spesifikasi CSS Logical Properties dan Nilai Level 1 yang kini dalam status Draf Editor. Itu bermaksud definisi dan maklumat mengenainya boleh berubah antara sekarang dan cadangan rasmi.

.element ( inset-block-end: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Jadi, sebagai contoh, jika mod tulisan itu ditetapkan kepada horizontal-lryang inset-block-endhartanah akan bertindak sama seperti bottomdan menetapkan elemen yang diimbangi dari tepi bawah. Anda juga perlu menyatakan yang jelas positionmengenai elemen yang sama agar elemen itu dapat dilaksanakan, seperti bottomdan sifat mengimbangi fizikal yang lain.

Tetapi ubah elemen writing-modeke sesuatu seperti vertical-lrdan tepi "bawah" diputar ke arah menegak, bertindak lebih seperti rightharta benda.

Sintaks

inset-block-end: ;

Nilai awal: auto
Berlaku untuk: elemen kedudukan
Diwarisi: tidak
Peratusan: untuk harta fizikal yang sepadan
Nilai dikira: sama dengan bottomharta sepadan
Jenis animasi: mengikut jenis nilai yang dikira

Nilai

inset-block-endmengambil nilai panjang dan menyokong kata kunci global. Nilai lalai adalah auto.

/* Length values */ inset-block-end: 50px; inset-block-end: 4em; inset-block-end: 3.5rem inset-block-end: 25vh; /* Percentage values */ inset-block-end: 50%; /* Keyword values */ inset-block-end: auto; /* initial value */ /* Global values */ inset-block-end: initial inset-block-end: inherit; inset-block-end: unset;