فصل 3 از 27 درس 1 از 2

Spacing و Sizing

Margin، Padding و Gap

بخشی از آموزش جامع Tailwind CSS

محتوای درس Margin، Padding و Gap

Margin، Padding و Gap را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Spacing در Tailwind از یک مقیاس هماهنگ استفاده می‌کند. Margin فاصله بیرونی، Padding فضای داخلی و Gap فاصله میان فرزندان Flex یا Grid را کنترل می‌کند؛ برای رابط RTL استفاده از جهت‌های منطقی مانند ms و me مطمئن‌تر است.

روش پیاده‌سازی

  1. محدوده محتوا را با max-width و mx-auto کنترل کنید.
  2. Padding داخلی Component را مستقل از فاصله بیرونی تنظیم کنید.
  3. برای Grid و Flex ترجیحاً از gap استفاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<section class="mx-auto max-w-4xl p-6">
  <div class="grid gap-6 md:grid-cols-3">
    <article class="rounded-xl bg-white p-5 shadow">Card 1</article>
    <article class="rounded-xl bg-white p-5 shadow">Card 2</article>
    <article class="rounded-xl bg-white p-5 shadow">Card 3</article>
  </div>
</section>

خروجی مورد انتظار

سه کارت با فاصله مساوی و Padding مناسب.

نکات مهم و خطاهای رایج

  • برای جبران چیدمان با Marginهای منفی بی‌دلیل پیچیدگی نسازید.
  • در اجزای Wrap شونده، space-x جایگزین کاملی برای gap نیست.

تمرین پیشنهادی

فاصله‌های مثال را در سه اندازه صفحه تنظیم و ریتم عمودی را بررسی کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS