Margin-block - Trik CSS | CSS Almanak 2024

margin-blockadalah properti singkatan dalam CSS yang menetapkan elemen margin-block-startdan margin-block-endnilai, keduanya merupakan properti logis. Ini menciptakan ruang di sekitar elemen dalam arah inline, yang ditentukan oleh elemen writing-mode, direction, dan text-orientation.

Properti tersebut adalah bagian dari spesifikasi CSS Logical Properties dan Nilai Level 1 yang saat ini berstatus Draf Editor. Artinya definisi dan informasi tentang itu bisa berubah antara sekarang dan rekomendasi resmi.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Jika writing-modedisetel ke horizontal-lr, margin-blockproperti akan bertindak seperti setelan margin-topdan margin-bottom. Salah satu aspek menarik dari properti ini adalah bahwa ini adalah salah satu properti logis yang tidak memiliki peta satu-ke-satu dengan properti non-logis. Tidak ada properti lama yang menyetel (dan hanya) margin arah blok.

Tapi ubah elemen writing-modemenjadi sesuatu seperti vertical-lrdan tepi "bawah" diputar ke arah vertikal, bertindak lebih seperti properti margin-leftdan margin-right.

Sintaksis

margin-block: (1,2)

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-top(hingga dua kali) yang 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

Jika Anda sudah familiar dengan marginproperti singkatan, maka margin-blockakan terasa sangat familiar. Satu-satunya perbedaan adalah bahwa ini bekerja dalam dua arah, bukan empat.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;