Inset-block-end - Trik CSS | CSS Almanak 2024

inset-block-endadalah properti CSS logis yang menetapkan panjang elemen diimbangi ke arah blok dari tepi akhirnya. Ini seperti mendeklarasikan bottomkecuali titik akhirnya ditentukan oleh elemen direction, text-orientationdan writing-mode, seperti properti logis lainnya.

Properti tersebut adalah bagian dari spesifikasi CSS Logical Properties dan Nilai Level 1 yang saat ini berstatus Draf Editor. Artinya definisi dan informasi tentang itu bisa berubah antara sekarang dan rekomendasi resmi.

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

Jadi, misalnya, jika modus menulis diatur ke horizontal-lrdalam inset-block-endproperti akan bertindak seperti bottomdan mengatur elemen offset dari tepi bawah. Anda bahkan perlu menentukan eksplisit positionpada elemen yang sama agar dapat diterapkan, sama seperti bottomproperti offset fisik lainnya.

Tapi ubah elemen writing-modemenjadi sesuatu seperti vertical-lrdan tepi "bawah" diputar ke arah vertikal, bertindak lebih seperti rightproperti.

Sintaksis

inset-block-end: ;

Nilai awal: auto
Berlaku untuk: elemen yang diposisikan
Diwariskan: tidak
Persentase: untuk properti fisik yang sesuai
Nilai yang dihitung: sama dengan bottomproperti terkait
Jenis animasi: menurut jenis nilai yang dihitung

Nilai

inset-block-endmengambil nilai panjang dan mendukung kata kunci global. Nilai defaultnya 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;