Spacing (Margin & Padding)

Spacing System - ប្រព័ន្ធគម្លាតក្នុង Tailwind

Spacing គឺជាផ្នែកសំខាន់បំផុតមួយក្នុង design system។ Tailwind ផ្តល់នូវ spacing scale ដែល consistent និងងាយប្រើ សម្រាប់ margin និង padding។

🎯 ហេតុអ្វីត្រូវការ Spacing System?

បញ្ហា (គ្មាន System)	ដំណោះស្រាយ (Tailwind Spacing)
Spacing ខុសគ្នារាល់កន្លែង (13px, 17px, 21px...)	Spacing scale consistent (4px, 8px, 12px, 16px...)
Developer គិត values ផ្ទាល់ខ្លួន	ប្រើ pre-defined scale (0-96)
Hard to maintain និង update	Update config file តែមួយ
Inconsistent visual rhythm	Harmonious spacing relationships

📐 Tailwind Spacing Scale - ពន្យល់លម្អិត

Tailwind ប្រើ base-4 spacing scale (គុណនឹង 4px) ជា foundation:

Class Number	rem Value	Pixel Value (16px base)	Use Case
0	0rem	0px	Remove spacing
px	-	1px	Borders, dividers
0.5	0.125rem	2px	Very tight spacing
1	0.25rem	4px	Minimal spacing
2	0.5rem	8px	Small gaps
3	0.75rem	12px	Compact elements
4	1rem	16px	Default spacing (Most common)
5	1.25rem	20px	Medium spacing
6	1.5rem	24px	Comfortable spacing
8	2rem	32px	Large spacing
10	2.5rem	40px	Section spacing
12	3rem	48px	Component separation
16	4rem	64px	Large components
20	5rem	80px	Major sections
24	6rem	96px	Hero sections
32	8rem	128px	Very large spacing
40	10rem	160px	Dramatic spacing
96	24rem	384px	Maximum spacing

📏 Class Naming Convention

Tailwind ប្រើ pattern: {property}{direction}-{size}

Component	Options	ការពន្យល់
Property	m, p	m = margin, p = padding
Direction	t, r, b, l, x, y, (none)	t=top, r=right, b=bottom, l=left, x=horizontal, y=vertical, none=all sides
Size	0, 1, 2...96, auto	Spacing scale value

📝 ឧទាហរណ៍:

Class	CSS Equivalent	ការពន្យល់
m-4	margin: 1rem;	Margin គ្រប់ទិស 16px
mt-4	margin-top: 1rem;	Margin ខាងលើ 16px
mx-4	margin-left: 1rem; margin-right: 1rem;	Margin ឆ្វេង+ស្តាំ 16px
my-4	margin-top: 1rem; margin-bottom: 1rem;	Margin លើ+ក្រោម 16px
p-6	padding: 1.5rem;	Padding គ្រប់ទិស 24px
px-6	padding-left: 1.5rem; padding-right: 1.5rem;	Padding ឆ្វេង+ស្តាំ 24px
py-2	padding-top: 0.5rem; padding-bottom: 0.5rem;	Padding លើ+ក្រោម 8px
mx-auto	margin-left: auto; margin-right: auto;	Center element (តម្រឹមកណ្តាល)

🔄 Margin vs Padding - ពេលណាប្រើ?

Aspect	Margin (ទំហំខាងក្រៅ)	Padding (ទំហំខាងក្នុង)
ទីតាំង	ខាងក្រៅ border	ខាងក្នុង border
ផ្ទៃខាងក្រោយ	មិនមាន background color	មាន background color
Clickable Area	មិនអាច click	អាច click
ប្រើសម្រាប់	គម្លាតរវាង elements	គម្លាតក្នុង element
Center Element	✅ mx-auto	❌ មិនអាច
Negative Values	✅ -m-4	❌ គ្មាន negative padding
Use Case	Spacing between cards, sections	Space inside buttons, cards

➖ Negative Margins

Tailwind អនុញ្ញាតឲ្យប្រើ negative margins ដោយបន្ថែម - មុខ class:

• -m-4 = margin: -1rem;
• -mt-8 = margin-top: -2rem;
• -mx-4 = margin-left: -1rem; margin-right: -1rem;

ប្រើសម្រាប់:

• 🎨 Overlapping elements - ធ្វើឲ្យ elements overlap គ្នា
• 🖼️ Pulling elements - pull element ចេញពី container
• 📐 Offset positioning - Adjust position without absolute positioning

---

Margin Classes - ការប្រើប្រាស់លម្អិត

🎯 Margin Directions

Direction Class	Properties Affected	Common Use Case
m-*	All 4 sides	Equal spacing around element
mt-*	Top	Spacing above headings, sections
mb-*	Bottom	Spacing below paragraphs, sections
ml-* / ms-*	Left / Start (RTL aware)	Indent, offset from left
mr-* / me-*	Right / End (RTL aware)	Spacing before inline elements
mx-*	Left + Right (horizontal)	Horizontal centering (mx-auto), side spacing
my-*	Top + Bottom (vertical)	Vertical spacing for blocks

🎨 Auto Margin - Center Elements

mx-auto គឺជា class ដែលប្រើញឹកញាប់បំផុតសម្រាប់ center elements:

<div class="max-w-4xl mx-auto">
  Content centered horizontally
</div>

⚠️ លក្ខខណ្ឌសម្រាប់ mx-auto:

• ✅ Element ត្រូវមាន width ជាក់លាក់ (w-64, max-w-xl, etc.)
• ✅ Parent ត្រូវមាន width 100% (default block elements)
• ❌ មិនដំណើរការលើ inline elements
• ❌ មិនដំណើរការលើ flex/grid items (ប្រើ justify-center ជំនួស)

---

Padding Classes - ការប្រើប្រាស់លម្អិត

🎯 Padding Directions

Direction Class	Properties Affected	Common Use Case
p-*	All 4 sides	Cards, containers, boxes
pt-*	Top	Header spacing, top of containers
pb-*	Bottom	Footer spacing, bottom of containers
pl-* / ps-*	Left / Start	Text indent, icon spacing
pr-* / pe-*	Right / End	Dropdown arrows, scrollbar space
px-*	Left + Right	Buttons, horizontal padding
py-*	Top + Bottom	Buttons, vertical spacing

🔘 Button Padding Best Practices

Button Size	Padding Classes	Pixel Value	Use Case
Small	px-3 py-1	12px × 4px	Compact UIs, tags
Medium	px-4 py-2	16px × 8px	Default buttons
Large	px-6 py-3	24px × 12px	Primary CTAs
Extra Large	px-8 py-4	32px × 16px	Hero buttons, Landing pages

📦 Common Spacing Patterns

Component	Typical Spacing	Classes
Card	Padding inside, margin between	p-6 m-4
Button	More horizontal than vertical	px-6 py-2
Section	Large vertical spacing	py-12 or py-20
Container	Horizontal padding for mobile	px-4 md:px-8
List Items	Bottom margin except last	mb-4 last:mb-0
Form Fields	Consistent bottom spacing	mb-4 or mb-6

💡 Best Practices

Do ✅	Don't ❌	ហេតុផល
ប្រើ spacing scale	ប្រើ arbitrary values (p-[13px])	Consistency in design system
mx-auto for centering	ml-32 mr-32 for centering	Responsive and flexible
space-y-4 for vertical spacing	mb-4 on every child	Cleaner markup
ប្រើ px-*, py-*	ប្រើ pl-* pr-* pt-* pb-* separately	Less verbose
Padding for clickable areas	Margin for clickable areas	Better UX (larger click target)

🎓 Advanced: Space Between Utilities

ជំនួស margin លើ child elements ទាំងអស់ អ្នកអាចប្រើ space-* utilities:

<!-- Instead of this: -->
<div>
  <div class="mb-4">Item 1</div>
  <div class="mb-4">Item 2</div>
  <div>Item 3</div>
</div>

<!-- Use this: -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Class	Effect
space-y-4	Vertical spacing (top/bottom) between children
space-x-4	Horizontal spacing (left/right) between children
-space-y-4	Negative vertical spacing (overlap)