Spacing، اندازه‌ها و Borderها در Tailwind CSS

در طراحی رابط کاربری فقط انتخاب رنگ و اندازه متن کافی نیست. فاصله بین عناصر، فضای داخلی کارت‌ها، عرض و ارتفاع بخش‌ها و همچنین حاشیه اطراف عناصر تأثیر زیادی روی نظم و ظاهر صفحه دارند. در CSS معمولی برای کنترل این موارد از ویژگی‌هایی مانند margin، padding، width، height و border استفاده می‌کنیم. Tailwind CSS برای این ویژگی‌ها Utility Classهای مشخصی دارد که به ما اجازه می‌دهند بدون نوشتن CSS جداگانه، اندازه و فاصله عناصر را کنترل کنیم. در این مقاله با مفهوم Spacing، تفاوت Margin و Padding، کنترل عرض و ارتفاع و ایجاد Border در Tailwind CSS آشنا می‌شویم.

Spacing در Tailwind CSS چیست؟

Spacing به فاصله‌ای گفته می‌شود که در اطراف یا داخل عناصر ایجاد می‌کنیم.

دو مفهوم بسیار مهم در این بخش عبارت‌اند از:

• Margin → فاصله بیرونی

• Padding → فاصله داخلی

برای درک ساده‌تر، یک عنصر HTML را تصور کنید:

        Margin
    ┌───────────────┐
    │   Border      │
    │  ┌─────────┐  │
    │  │ Padding │  │
    │  │ Content │  │
    │  └─────────┘  │
    └───────────────┘

محتوا در مرکز قرار دارد، Padding فضای بین محتوا و Border است و Margin فضای بیرون عنصر است.

Padding چیست؟

Padding فاصله داخلی یک عنصر است.

در Tailwind برای Padding از p-* استفاده می‌کنیم.

مثلاً:

<div class="p-4">
    محتوای کارت
</div>

کلاس:

p-4

برای عنصر Padding ایجاد می‌کند.

مثال دیگر:

<div class="p-8">
    محتوای بیشتر
</div>

هرچه مقدار Utility بیشتر باشد، معمولاً فضای داخلی بیشتری ایجاد می‌شود.

Padding در جهت‌های مختلف

گاهی نمی‌خواهیم از تمام جهات Padding یکسان داشته باشیم.

Tailwind برای این حالت Utilityهای مختلفی دارد.

Padding افقی

<div class="px-6">
    محتوا
</div>

px-6 یعنی Padding در محور افقی.

← Padding ← Content → Padding →

Padding عمودی

<div class="py-4">
    محتوا
</div>

py-4 یعنی Padding در محور عمودی.

      Padding
         ↓
      Content
         ↑
      Padding

Padding در یک جهت مشخص

برای کنترل هر جهت به صورت جداگانه می‌توان از Utilityهای زیر استفاده کرد:

pt-*  → Padding Top
pr-*  → Padding Right
pb-*  → Padding Bottom
pl-*  → Padding Left

برای مثال:

<div class="pt-6 pb-2">
    محتوا
</div>

در این مثال:

• pt-6 → Padding بالا

• pb-2 → Padding پایین

Margin چیست؟

Margin فاصله بیرونی یک عنصر است.

در Tailwind برای Margin از m-* استفاده می‌کنیم:

<div class="m-4">
    محتوا
</div>

این کلاس برای اطراف عنصر Margin ایجاد می‌کند.

همانند Padding، Margin نیز می‌تواند در جهت‌های مختلف تنظیم شود.

Margin افقی و عمودی

برای Margin افقی:

<div class="mx-6">
    محتوا
</div>

برای Margin عمودی:

<div class="my-4">
    محتوا
</div>

به این ترتیب:

mx-* → Margin Left + Right
my-* → Margin Top + Bottom

Margin در یک جهت مشخص

برای کنترل یک جهت خاص:

mt-*  → Margin Top
mr-*  → Margin Right
mb-*  → Margin Bottom
ml-*  → Margin Left

مثال:

<h2 class="mb-4">
    عنوان
</h2>

<p class="mt-2">
    توضیحات
</p>

در اینجا عنوان از عنصر بعدی فاصله دارد و پاراگراف نیز فاصله بالایی دارد.

مقدار Auto

یکی از Utilityهای بسیار پرکاربرد Tailwind، مقدار auto است.

برای مثال:

<div class="mx-auto max-w-md">
    محتوای مرکزی
</div>

mx-auto باعث می‌شود Margin افقی به صورت خودکار تنظیم شود.

ترکیب زیر برای قرار دادن یک عنصر با عرض محدود در مرکز صفحه بسیار رایج است:

<div class="max-w-md mx-auto">
    Content
</div>

این الگو را در پروژه‌های واقعی زیاد خواهید دید.

تفاوت Padding و Margin

این دو مفهوم را باید به خوبی یاد بگیرید.

Padding فضای داخل عنصر است:

┌─────────────────────┐
│      Padding        │
│   ┌─────────────┐   │
│   │   Content   │   │
│   └─────────────┘   │
│      Padding        │
└─────────────────────┘

Margin فضای خارج عنصر است:

       Margin
          ↓
    ┌───────────┐
    │  Element  │
    └───────────┘
          ↑
       Margin

به صورت خلاصه:

p-* → Padding
m-* → Margin

Width در Tailwind CSS

برای کنترل عرض عناصر از Utilityهای w-* استفاده می‌کنیم.

برای مثال:

<div class="w-64">
    محتوا
</div>

یا:

<div class="w-full">
    محتوای کامل
</div>

w-full یکی از Utilityهای بسیار پرکاربرد است و عرض عنصر را برابر با فضای موجود قرار می‌دهد.

Width با درصد

Tailwind Utilityهایی برای عرض نسبی نیز دارد.

برای مثال:

<div class="w-1/2">
    نیمی از عرض
</div>

یا:

<div class="w-1/3">
    یک سوم عرض
</div>

و:

<div class="w-2/3">
    دو سوم عرض
</div>

این نوع Utilityها در ساخت Layoutها بسیار کاربردی هستند.

Maximum Width

گاهی نمی‌خواهیم یک عنصر بیش از اندازه بزرگ شود.

برای این کار می‌توان از max-w-* استفاده کرد.

مثلاً:

<div class="max-w-lg">
    محتوای صفحه
</div>

یکی از الگوهای رایج:

<div class="max-w-4xl mx-auto">
    محتوای اصلی صفحه
</div>

در اینجا:

• max-w-4xl → حداکثر عرض را محدود می‌کند.

• mx-auto → عنصر را در مرکز قرار می‌دهد.

Height در Tailwind CSS

برای کنترل ارتفاع از h-* استفاده می‌کنیم.

برای مثال:

<div class="h-32">
    محتوا
</div>

یا:

<div class="h-screen">
    صفحه کامل
</div>

h-screen برای ایجاد بخشی با ارتفاع صفحه کاربرد دارد.

Minimum و Maximum Height

مانند Width، می‌توان حداقل و حداکثر ارتفاع را نیز کنترل کرد.

برای مثال:

<div class="min-h-screen">
    محتوای صفحه
</div>

یا:

<div class="max-h-96">
    محتوای محدود
</div>

این Utilityها مخصوصاً هنگام ساخت صفحات و بخش‌های مختلف Layout کاربرد دارند.

Border چیست؟

Border یا حاشیه، خطی است که اطراف یک عنصر قرار می‌گیرد.

در Tailwind برای ایجاد Border ساده می‌توان از:

<div class="border">
    محتوای کارت
</div>

استفاده کرد.

ضخامت Border

برای تغییر ضخامت Border می‌توان از Utilityهای زیر استفاده کرد:

border
border-2
border-4
border-8

مثلاً:

<div class="border-2">
    Border ضخیم‌تر
</div>

هرچه مقدار بیشتر باشد، ضخامت Border بیشتر خواهد بود.

رنگ Border

می‌توان رنگ Border را نیز مشخص کرد:

<div class="border border-gray-300">
    کارت
</div>

یا:

<div class="border border-blue-500">
    بخش اطلاعات
</div>

ساختار کلی:

border-{color}-{shade}

Border در جهت‌های مختلف

گاهی می‌خواهیم فقط یک طرف عنصر Border داشته باشد.

برای مثال:

<div class="border-b">
    محتوا
</div>

در اینجا فقط Border پایین ایجاد می‌شود.

Utilityهای مهم:

border-t → بالا
border-r → راست
border-b → پایین
border-l → چپ

همچنین می‌توان ضخامت را نیز مشخص کرد:

<div class="border-b-2">
    محتوا
</div>

Border Radius

برای گرد کردن گوشه‌های عناصر از rounded-* استفاده می‌کنیم.

مثال:

<div class="rounded">
    کارت
</div>

یا:

<div class="rounded-lg">
    کارت
</div>

مقادیر رایج:

rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full

یکی از کاربردهای بسیار رایج:

<button class="rounded-lg">
    ثبت سفارش
</button>

ایجاد دایره با rounded-full

اگر یک عنصر عرض و ارتفاع یکسان داشته باشد، می‌توان با rounded-full آن را به شکل دایره درآورد.

مثال:

<div class="w-16 h-16 rounded-full">
    Avatar
</div>

این الگو برای ساخت Avatar و عناصر مشابه بسیار کاربردی است.

ترکیب Spacing و Border

حالا چند Utility را با هم ترکیب کنیم.

<div class="p-6 m-4 border border-gray-300 rounded-lg">
    <h2 class="text-xl font-bold">
        عنوان کارت
    </h2>

    <p class="mt-2">
        این متن داخل کارت قرار گرفته است.
    </p>
</div>

در این مثال:

p-6              → Padding
m-4              → Margin
border           → Border
border-gray-300  → Border Color
rounded-lg       → Border Radius

این ترکیب در طراحی کارت‌ها بسیار رایج است.

ساخت یک Card واقعی

حالا یک کارت محصول ایجاد کنیم:

<div class="max-w-sm mx-auto p-6 bg-white border border-gray-200 rounded-xl">

    <h2 class="text-2xl font-bold text-gray-800">
        لپ‌تاپ حرفه‌ای
    </h2>

    <p class="mt-3 text-gray-600">
        مناسب برای برنامه‌نویسی و طراحی وب.
    </p>

    <p class="mt-4 text-xl font-bold text-blue-600">
        ۵۰,۰۰۰,۰۰۰ تومان
    </p>

    <button class="mt-5 px-5 py-2 bg-blue-600 text-white rounded-lg">
        مشاهده محصول
    </button>

</div>

در این مثال، Utilityهای مختلفی را کنار هم قرار داده‌ایم.

ساختار ذهنی کارت می‌تواند به صورت زیر باشد:

Product Card
 ├── Width
 ├── Margin
 ├── Padding
 ├── Border
 ├── Radius
 ├── Title
 ├── Description
 ├── Price
 └── Button

استفاده از Space Between

گاهی چند عنصر داریم و می‌خواهیم بین آن‌ها فاصله ایجاد کنیم.

برای مثال:

<div class="space-y-4">

    <div class="border p-4">
        مورد اول
    </div>

    <div class="border p-4">
        مورد دوم
    </div>

    <div class="border p-4">
        مورد سوم
    </div>

</div>

space-y-4 بین عناصر فرزند در جهت عمودی فاصله ایجاد می‌کند.

برای جهت افقی نیز می‌توان از:

<div class="space-x-4">
    ...
</div>

استفاده کرد.

این Utility زمانی بسیار کاربردی است که چند عنصر مشابه پشت سر هم داشته باشیم.

یک تمرین عملی

اکنون یک کارت پروفایل ایجاد کنید.

کارت باید شامل موارد زیر باشد:

Profile Card
 ├── Avatar
 ├── Name
 ├── Description
 └── Button

سعی کنید موارد زیر را در آن استفاده کنید:

w-...
h-...
p-...
m-...
border
rounded-full
rounded-lg
text-...
bg-...

هدف تمرین این است که تفاوت Margin، Padding، Width، Height و Border را در یک مثال واقعی مشاهده کنید.

نکات مهم برای مبتدی‌ها

در ابتدای یادگیری ممکن است تعداد Utilityهای Tailwind زیاد به نظر برسد. لازم نیست همه آن‌ها را حفظ کنید.

کافی است ابتدا این الگوهای اصلی را به خاطر بسپارید:

p-*     → Padding
px-*    → Padding X
py-*    → Padding Y

m-*     → Margin
mx-*    → Margin X
my-*    → Margin Y

w-*     → Width
h-*     → Height

max-w-* → Maximum Width
min-h-* → Minimum Height

border  → Border
rounded → Border Radius

بعد از مدتی استفاده از Tailwind، این ساختارها به صورت طبیعی برایتان قابل تشخیص خواهند شد.

جمع‌بندی

در این مقاله با یکی از پایه‌ای‌ترین بخش‌های Tailwind CSS یعنی Spacing، اندازه‌ها و Borderها آشنا شدیم. یاد گرفتیم که p-* برای Padding و m-* برای Margin استفاده می‌شود و با استفاده از پیشوندهایی مانند x و y می‌توان جهت افقی یا عمودی را کنترل کرد.

همچنین با Utilityهای مربوط به Width و Height، محدود کردن اندازه عناصر، ایجاد Border، تغییر ضخامت و رنگ Border و گرد کردن گوشه‌ها آشنا شدیم. در پایان نیز این مفاهیم را در قالب یک کارت واقعی با یکدیگر ترکیب کردیم.

نکته کلیدی: برای یادگیری Tailwind نیازی به حفظ کردن صدها کلاس ندارید. ابتدا الگوی نام‌گذاری Utilityها را یاد بگیرید؛ سپس با تمرین، کلاس‌های پرکاربرد به مرور برایتان آشنا خواهند شد.