Margin-inline-end - Trik CSS | CSS Almanak 2024

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

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

Tepi akhir dalam arah sebaris ditentukan oleh elemen writing-mode, directiondan text-orientation. Jadi, saat menggunakan margin-inline-enddalam konteks kiri-ke-kanan horizontal, ini bertindak seperti margin-righttepi akhir elemen adalah sisi kanan.

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

Sintaksis

margin-inline-end:

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-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;