Margin-blok - Trik CSS | CSS Almanac 2025

margin-blockadalah sifat ringkas dalam CSS yang menetapkan elemen margin-block-startdan margin-block-endnilai, yang kedua-duanya adalah sifat logik. Ia mewujudkan ruang di sekeliling unsur ke arah sebaris, yang ditentukan oleh unsur writing-mode, direction, dan text-orientation.

Properti ini adalah sebahagian daripada spesifikasi CSS Logical Properties dan Nilai Level 1 yang kini dalam status Draf Editor. Itu bermaksud definisi dan maklumat mengenainya boleh berubah antara sekarang dan cadangan rasmi.

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

Sekiranya writing-modediatur ke horizontal-lr, margin-blockharta tanah akan bertindak seperti pengaturan margin-topdan margin-bottom. Salah satu aspek menarik dari harta tanah ini adalah bahawa ia adalah salah satu sifat logik yang tidak mempunyai peta satu lawan satu dengan harta bukan logik. Tidak ada harta lama yang menetapkan kedua (dan hanya) margin arah blok.

Tetapi ubah elemen writing-modeke sesuatu seperti vertical-lrdan tepi "bawah" diputar ke arah menegak, bertindak lebih seperti sifat margin-leftdan margin-rightsifat.

Sintaks

margin-block: (1,2)

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

Sekiranya anda biasa dengan marginharta tanah yang pendek, maka margin-blockakan terasa sangat biasa. Satu-satunya perbezaan ialah ia berfungsi dalam dua arah dan bukannya empat arah.

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