Margin
Tambah margin pada elemen
Sintaks
space="m:[value]" or space="m-{side}:[value]"Nilai
| Properti | CSS Output | Huraian |
|---|---|---|
m | margin: var(--s-{value}) | Semua sisi |
m-t | margin-top: var(--s-{value}) | Atas |
m-r | margin-right: var(--s-{value}) | Kanan |
m-b | margin-bottom: var(--s-{value}) | Bawah |
m-l | margin-left: var(--s-{value}) | Kiri |
m-x | margin-left: var(--s-{value}) margin-right: var(--s-{value}) | Mendatar |
m-y | margin-top: var(--s-{value}) margin-bottom: var(--s-{value}) | Menegak |
Nilai Skala
none, tiny, small, medium, big, giant, vast, auto
Contoh
html
<div space="m:medium">Margin all sides</div>
<div space="m-x:auto">Centered horizontally</div>
<div space="m-t:big">Top margin</div>Pratonton
Skala Margin
space="m:medium" - Saiz margin berbeza dari skala
m:tiny
m:small
m:medium
Lihat Kod
html
<div layout="flex col" space="g:tiny p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="m:tiny" visual="bg:primary text:white rounded:small">m:tiny</div>
<div space="m:small" visual="bg:primary text:white rounded:small">m:small</div>
<div space="m:medium" visual="bg:primary text:white rounded:small">m:medium</div>
</div>Tengah Automatik
space="m-x:auto" - Guna m-x:auto untuk tengahkan mendatar
m-x:auto
Lihat Kod
html
<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="m-x:auto p:small" visual="bg:primary text:white rounded:small" style="width: fit-content;">m-x:auto</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div space="margin:[custom-value]">Custom</div>Nota
TIP
Sokongan Skala Tailwind
Gunakan awalan tw- untuk mengakses skala numerik Tailwind: m:tw-4 (1rem), m-t:tw-8 (2rem)