Margin-block-start - Trik CSS

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

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

Tepi permulaan dalam arah blok ditentukan oleh elemen writing-mode, directiondan text-orientation. Oleh itu, apabila menggunakan margin-block-startdalam konteks kiri-ke-kanan mendatar, ia bertindak sama seperti margin-toppinggir permulaan elemen adalah bahagian atasnya.

Tetapi jika kita mengubah writing-modeke, katakanlah, menegak, elemen diputar, meletakkan tepi permulaan ke kiri. Kesannya, margin-block-startberkelakuan seperti margin-left. Pada asasnya, pinggir permulaan relatif terhadap arah alirannya. Itulah yang kami maksudkan ketika bercakap mengenai sifat "logik".

Sintaks

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