Atribut inset-inline-end CSS

Definisi dan penggunaan

inset-inline-end Atribut untuk menentukan jarak ujung elemen di arah baris dengan elemen induknya.

Perhatian:Untuk membuat atribut ini berlaku, harus disetel position Atribut

CSS inset-inline dan inset-block Atribut dengan CSS top,bottom,left dan right Atribut yang hampir sama, tetapi inset-block dan inset-inline Atribut ini tergantung pada arah blok dan arah baris.

Perhatian:atribut CSS yang relevan writing-mode dan direction Mendefinisikan arah baris. Ini akan mempengaruhi posisi ujung elemen di arah baris dan inset-inline-end Hasil atribut. Untuk halaman berbahasa Inggris, arah baris adalah dari kiri ke kanan, dan arah blok adalah ke bawah.

Contoh

Contoh 1

Atur jarak elemen <div> yang sudah terletak di antara ujung baris dan elemen induk.

div {
  inset-inline-end: 50px;
}

Coba sendiri

Contoh 2

Ketika nilai atribut <div> element writing-mode Ketika nilai atribut diatur menjadi vertical-rl, arah baris adalah ke bawah. Hasilnya ujung elemen bergerak dari sisi kanan ke bawah:

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 3

Ketika nilai atribut <div> element direction Ketika nilai atribut diatur menjadi rtl, arah baris adalah dari kanan ke kiri. Hasilnya ujung elemen bergerak dari sisi kanan ke kiri:

div {
  inset-inline-end: 50px;
  direction: rtl;
}

Coba sendiri

Syntaks CSS

inset-inline-end: auto|length|initial|inherit;

Nilai atribut

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang sepenuhnya mendukung atribut ini.

Laman yang berhubungan

Panduan：Pengaturan lokasi CSS

Referensi：Atribut position CSS

Referensi：Atribut direction CSS

Referensi：Properti writing-mode CSS