Padding

Tambah padding pada elemen

Sintaks

space="p:[value]" or space="p-{side}:[value]"

Nilai

Properti	CSS Output	Huraian
p	padding: var(--s-{value})	Semua sisi
p-t	padding-top: var(--s-{value})	Atas
p-r	padding-right: var(--s-{value})	Kanan
p-b	padding-bottom: var(--s-{value})	Bawah
p-l	padding-left: var(--s-{value})	Kiri
p-x	padding-left: var(--s-{value}) padding-right: var(--s-{value})	Mendatar
p-y	padding-top: var(--s-{value}) padding-bottom: var(--s-{value})	Menegak

Nilai Skala

none, tiny, small, medium, big, giant, vast

Contoh

<div space="p:medium">Padding all sides</div>
<div space="p-x:big p-y:small">Different padding</div>
<div space="p:[20px]">Custom padding</div>

Pratonton

Skala Padding

space="p:medium" - Saiz padding berbeza dari skala

tiny

small

medium

big

Lihat Kod

<div layout="flex" space="g:small">
  <div space="p:tiny" visual="bg:primary text:white rounded:small">tiny</div>
  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
  <div space="p:medium" visual="bg:primary text:white rounded:small">medium</div>
  <div space="p:big" visual="bg:primary text:white rounded:small">big</div>
</div>

Padding Arah

space="p-x:big" - Padamkan padding pada sisi tertentu

p-x:big p-y:small

p-t:big

Lihat Kod

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p-x:big p-y:small" visual="bg:primary text:white rounded:small">p-x:big p-y:small</div>
  <div space="p-t:big" visual="bg:primary text:white rounded:small">p-t:big</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div space="padding:[custom-value]">Custom</div>

Nota

TIP

Sokongan Skala Tailwind

Gunakan awalan tw- untuk mengakses skala numerik Tailwind: p:tw-4 (1rem), p:tw-8 (2rem)

Rujukan