Atribut inset-inline CSS

Definisi dan penggunaan

inset-inline atur jarak elemen dalam arah baris dengan elemen induknya.

Perhatian:Untuk membuat atribut ini berlaku, harus ditentukan position Atribut.

inset-inline Atribut ini adalah singkatan dari atribut berikut:

inset-inline Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut inset-inline memiliki dua nilai:

inset-inline: 10px 50px;
  • Jarak ujung awal adalah 10px
  • Jarak ujung berakhir adalah 50px

Jika atribut inset-inline memiliki nilai:

inset-inline: 10px;
  • jarak ujung awal dan akhir adalah 10px

CSS inset-inline dan inset-block Atribut dengan CSS top,bottom,left dan right Atribut yang sangat mirip, tetapi inset-block dan inset-inline Atribut ini tergantung dari arah blok dan arah baris.

Perhatian:atribut CSS yang relevan writing-mode dan direction Mendefinisikan arah baris. Ini akan mempengaruhi posisi awal dan akhir baris, serta inset-inline 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 telah disesuaikan di arah baris dengan elemen induknya:

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

Coba sendiri

Contoh 2

Ketika nilai atribut <div> element writing-mode Ketika nilai atribut vertical-rl disetel, arah baris adalah ke bawah. Hasilnya, ujung awal elemen bergerak dari kiri ke atas, dan ujung akhir bergerak dari kanan ke bawah:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 3

Ketika nilai atribut <div> element direction Ketika nilai atribut rtl disetel, arah baris adalah dari kanan ke kiri. Hasilnya, ujung awal elemen bergerak dari kiri ke kanan, dan ujung akhir bergerak dari kanan ke kiri:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

Coba sendiri

Sintaksis CSS

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

Nilai atribut

Nilai Deskripsi
auto Nilai default. Jarak default inset-inline elemen.
length Tentukan jarak dengan satuan px, pt, cm, dll. Memungkinkan nilai negatif. Lihat:Satuan CSS.
% Tentukan jarak persentase relatif dari ukuran elemen induk di sumbu yang relevan.
initial Tetapkan atribut ini ke nilai defaultnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: auto
Inheritsi: Tidak
Produksi animasi: Dukungan. Lihat:Atribut berhubungan dengan animasi.
Versi: CSS3
Sintaksis JavaScript: object.style.insetInline="100px 50px"

Dukungan browser

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

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

halaman relevan

Panduan:Pemosisian CSS

Referensi：Atribut position CSS

Referensi：Atribut direction CSS

Referensi：Properti writing-mode CSS