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

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

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

Tepi akhir dalam arah balok ditentukan oleh elemen writing-mode, directiondan text-orientation. Jadi, saat digunakan margin-block-enddalam konteks horizontal kiri-ke-kanan, ia bertindak seperti margin-bottomtepi awal elemen adalah bagian bawahnya.

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

Sintaksis

margin-block-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-end menerima satu panjang atau nilai kata kunci.

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