Atribut inset-block CSS

Halaman sebelumnya inset
Halaman berikutnya inset-block-end

Definisi dan penggunaan

Mendefinisikan arah blok. Ini akan mempengaruhi posisi awal dan akhir blok, serta Elemen pengaturan properti jarak dengan elemen induk di arah blok.

Atribut ini tergantung pada arah blok dan arah teks.Untuk membuat atribut ini berfungsi, harus disertai dengan position Atribut.

Mendefinisikan arah blok. Ini akan mempengaruhi posisi awal dan akhir blok, serta Atribut ini adalah singkatan dari berbagai atribut berikut:

inset-block-start
inset-block-end

Mendefinisikan arah blok. Ini akan mempengaruhi posisi awal dan akhir blok, serta Nilai atribut dapat diatur dengan berbagai cara:

Jika atribut inset-block memiliki dua nilai:

div {

jarak awal adalah 10px
jarak akhir adalah 50px

Jika atribut inset-block memiliki satu nilai:

inset-block: 10px;

jarak awal dan akhir adalah 10px

inset-block dan Atribut yang hampir sama, tetapi inset-block dan CSS Atribut dengan CSSbottomtopbottom, left dan right Atribut yang hampir sama, tetapi inset-block dan inset-inline

Atribut ini tergantung pada arah blok dan arah teks.Perhatian: Ketika <div> elemen Atribut CSS yang relevan Mendefinisikan arah blok. Ini akan mempengaruhi posisi awal dan akhir blok, serta inset-block

Hasil atribut. Untuk halaman berbahasa Inggris, arah blok adalah ke bawah, dan arah teks adalah dari kiri ke kanan.

Contoh

Contoh 1

Ketika atribut value diatur menjadi vertical-rl, posisi awal elemen pindah dari atas ke kanan, dan posisi akhir elemen pindah dari bawah ke kiri:
  div {
writing-mode: vertical-rl;

}

Atur jarak elemen <div> yang sudah terlokasi di arah blok dengan elemen orang tua:

Contoh 2 Ketika <div> elemen writing-mode

Ketika atribut value diatur menjadi vertical-rl, posisi awal elemen pindah dari atas ke kanan, dan posisi akhir elemen pindah dari bawah ke kiri:
  div {
  inset-block: 10px 50px;
writing-mode: vertical-rl;

}

Coba sendiri

Sintaks CSSNilai default. Nilai default inset-block elemen.inset-block: auto|

|initial|inherit;

Nilai atribut	Nilai
Nilai default:	Deskripsi
Nilai default. Nilai default inset-block elemen.	lengthSatuan CSSAtribut yang berhubungan dengan animasi
Tentukan jarak dengan satuan px, pt, cm, dll. Memungkinkan nilai negatif. Lihat:	%
Lihat untuk menetapkan atribut ini ke nilai default. Lihat:	Tentukan jarak persentase terhadap ukuran elemen orang tua di sumbu yang relevan. Lihat untuk menetapkan atribut ini ke nilai default. Lihat:Atribut yang berhubungan dengan animasi
Lihat untuk mendapatkan atribut ini dari elemen orang tua. Lihat:	initial Lihat untuk mendapatkan atribut ini dari elemen orang tua. Lihat:Atribut yang berhubungan dengan animasi

inherit

Detil teknis	Nilai default:
auto	Inheritsi:
Tidak	Pembuatan animasi:Dukungan. Lihat:Atribut yang berhubungan dengan animasi
.	Versi:
Sintaks CSS3:	JavaScript sintaks: object.style.insetBlock="100px 50px"