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

Spacing و Sizing

Width، Height و Max Width

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

محتوای درس Width، Height و Max Width

Width، Height و Max Width را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت 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
<div class="mx-auto w-full max-w-3xl">
  <img
    src="/images/tutorial.webp"
    alt="Tutorial"
    class="aspect-video w-full rounded-2xl object-cover"
  />
</div>

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

تصویر Responsive با نسبت 16:9 و حداکثر عرض کنترل‌شده.

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

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

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

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

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