Margin-inline-end - Trik CSS | CSS Almanac 2025

The margin-inline-endharta di CSS mentakrifkan jumlah ruang bersama-sama berakhir pinggir luar unsur ke arah sebaris. Ini termasuk dalam spesifikasi CSS Logical Properties Level 1, yang kini dalam Draf Kerja.

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

Tepi akhir dalam arah sebaris ditentukan oleh elemen writing-mode, directiondan text-orientation. Oleh itu, apabila menggunakan margin-inline-enddalam konteks kiri-ke-kanan mendatar, ia berfungsi sama seperti margin-righthujung elemen yang berada di sebelah kanan.

Tetapi jika kita mengubah writing-modeke, katakanlah, menegak, elemen diputar mengikut arah jam, meletakkan tepi akhir ke bawah. Kesannya, margin-inline-endberkelakuan seperti margin-bottom. Pada asasnya, pinggir permulaan relatif terhadap arah alirannya. Itulah yang kami maksudkan ketika bercakap mengenai sifat "logik".

Sintaks

margin-inline-end:

Agak pelik apabila melihat sintaks satu harta tanah merujuk kepada sintaks harta CSS yang lain dalam dokumentasi, tetapi itulah sebenarnya. Yang pada dasarnya cuba dinyatakan adalah bahawa harta tanah menerima nilai yang sama seperti margin-topyang berikut sintaks ini:

margin-top: | | auto;

Nilai awal: 0
Berlaku untuk: semua elemen kecuali elemen jadual dalaman, bekas asas ruby, dan bekas anotasi ruby
Diwarisi: tidak
Peratusan: untuk harta fizikal yang sepadan
Nilai dikira: sama dengan margin-*sifat yang sepadan
Jenis animasi: mengikut jenis nilai yang dikira

Nilai

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

/* 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;