Margin-inline-start - Trik CSS

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

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

Tepi permulaan dalam arah sebaris ditentukan oleh elemen writing-mode, directiondan text-orientation. Jadi, apabila menggunakan margin-inline-startdalam konteks kiri-ke-kanan mendatar, ia bertindak seperti margin-lefttepi permulaan elemen di sebelah kiri.

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

Sintaks

margin-inline-start:

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