Margin-inline-start - Trik CSS

The margin-inline-startproperti di CSS mendefinisikan jumlah ruang sepanjang tepi awal luar unsur dalam arah inline. Ini termasuk dalam spesifikasi CSS Logical Properties Level 1, yang saat ini ada dalam Working Draft.

.element ( margin-inline-start: 25%; writing-mode: vertical-lr; )

Tepi awal dalam arah sebaris ditentukan oleh elemen writing-mode, directiondan text-orientation. Jadi, saat digunakan margin-inline-startdalam konteks horizontal kiri-ke-kanan, ia bertindak seperti margin-lefttepi awal elemen adalah sisi kiri.

Tetapi jika kita mengubah writing-modemenjadi, katakanlah, vertikal, elemen diputar searah jarum jam, menempatkan tepi awal ke arah atas. Akibatnya, margin-inline-startberperilaku seperti margin-top. Pada dasarnya, tepi awal relatif terhadap arah alirannya. Itulah yang kami maksud saat berbicara tentang properti "logis".

Sintaksis

margin-inline-start:

Agak aneh melihat sintaks dari satu properti merujuk sintaks properti CSS lain langsung di dokumentasi, tapi memang begitulah adanya. Apa yang pada dasarnya coba katakan adalah bahwa properti menerima nilai yang sama seperti margin-topyang mengikuti sintaks ini:

margin-top: | | auto;

Nilai awal: 0
Berlaku untuk: semua elemen kecuali elemen tabel internal, wadah dasar rubi, dan wadah anotasi rubi
Diwariskan: tidak
Persentase: untuk properti fisik yang sesuai
Nilai yang dihitung: sama dengan margin-*properti terkait
Jenis animasi: menurut jenis nilai yang dihitung

Nilai

margin-block-start menerima satu panjang atau nilai kata kunci.

/* Length values */ margin-inline-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;