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

inset-block-startadalah properti CSS logis yang menetapkan panjang elemen diimbangi ke arah blok dari tepi awalnya. Ini seperti mendeklarasikan topkecuali titik awalnya 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-start: 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-startproperti akan bertindak seperti topdan mengatur elemen offset dari itu mulai tepi, yang merupakan bagian atas. Anda bahkan perlu menentukan eksplisit positionpada elemen yang sama agar dapat diterapkan, sama seperti topproperti offset fisik lainnya.

Tetapi ubah elemen writing-modemenjadi sesuatu seperti vertical-rldan tepi awal diputar ke arah vertikal, bertindak lebih seperti leftproperti.

Sintaksis

inset-block-start: ;

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

Nilai

inset-block-startmengambil nilai panjang dan mendukung kata kunci global. Nilai defaultnya adalah auto.

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