چگونگی عملکرد margin و padding در Tailwind CSS

با سلام خدمت همه دوستان و همراهان همیشگی وب سایت فراز کد:

در Tailwind CSS، دو ویژگی بسیار مهم برای تنظیم فضاها و فاصله‌ها در طراحی صفحه وب وجود دارند که معمولاً در همه فریم‌ورک‌های CSS و طراحی‌های وب استفاده می‌شوند: margin و padding.

Margin (حاشیه) چیست؟

Margin فاصله‌ای است که بین یک عنصر و دیگر عناصر اطراف آن ایجاد می‌کند. این فاصله در خارج از مرز (border) عنصر قرار می‌گیرد. به عبارت ساده، margin فضایی است که خارج از جعبه عنصر قرار دارد و برای تنظیم فاصله بین عناصر مختلف استفاده می‌شود.

Padding (داخل‌پدینگ) چیست؟

Padding فاصله‌ای است که در داخل مرز (border) عنصر قرار دارد. این فاصله به شما اجازه می‌دهد تا محتوای داخلی عنصر (مانند متن یا تصاویر) از لبه‌های عنصر فاصله بگیرد. به عبارت دیگر، padding فضای بین محتوای عنصر و مرز آن را تنظیم می‌کند.

استفاده از Margin و Padding در Tailwind

در Tailwind CSS، برای اعمال margin و padding به آسانی می‌توان از کلاس‌های آماده استفاده کرد که به طور پیش‌فرض سیستم مقیاس‌بندی دارند.

Margin در Tailwind

برای استفاده از margin در Tailwind، شما از کلاس‌هایی با پیشوند m- برای فاصله‌های عمومی، mt- برای فاصله بالا، mr- برای فاصله راست، mb- برای فاصله پایین و ml- برای فاصله چپ استفاده می‌کنید.

مثال‌های Margin:

<div class="m-4">
  <!-- فاصله 1rem در تمام اطراف عنصر -->
  محتوا
</div>

<div class="mt-6">
  <!-- 1.5rem فاصله از بالا -->
  محتوا
</div>

<div class="mr-2">
  <!-- فاصله 0.5rem از راست -->
  محتوا
</div>

<div class="mb-8 ml-12">
  <!-- فاصله 2rem از پایین و 3rem از چپ -->
  محتوا
</div>

• m-4: فاصله 1rem در تمام جهات (بالا، راست، پایین، چپ)
• mt-6: فاصله 1.5rem از بالا
• mr-2: فاصله 0.5rem از راست
• mb-8: فاصله 2rem از پایین
• ml-12: فاصله 3rem از چپ

Padding در Tailwind

برای استفاده از padding در Tailwind، شما از کلاس‌هایی با پیشوند p- برای داخل‌پدینگ عمومی، pt- برای داخل‌پدینگ بالا، pr- برای داخل‌پدینگ راست، pb- برای داخل‌پدینگ پایین و pl- برای داخل‌پدینگ چپ استفاده می‌کنید.

مثال‌های Padding:

<div class="p-4">
  <!-- داخل‌پدینگ 1rem در تمام اطراف عنصر -->
  محتوا
</div>

<div class="pt-6">
  <!-- داخل‌پدینگ 1.5rem از بالا -->
  محتوا
</div>

<div class="pr-2">
  <!-- داخل‌پدینگ 0.5rem از راست -->
  محتوا
</div>

<div class="pb-8 pl-12">
  <!-- داخل‌پدینگ 2rem از پایین و 3rem از چپ -->
  محتوا
</div>

• p-4: داخل‌پدینگ 1rem در تمام جهات (بالا، راست، پایین، چپ)
• pt-6: داخل‌پدینگ 1.5rem از بالا
• pr-2: داخل‌پدینگ 0.5rem از راست
• pb-8: داخل‌پدینگ 2rem از پایین
• pl-12: داخل‌پدینگ 3rem از چپ

تفاوت اصلی Margin و Padding ، مارجین فضای خارج از عنصر را کنترل می‌کند ولی پدینگ فضای داخل عنصر را کنترل می‌کند.

مقیاس مقادیر در Tailwind

Tailwind از یک مقیاس پیش‌فرض برای فاصله‌ها استفاده می‌کند که به این صورت است:

• m-1 = 0.25rem
• m-2 = 0.5rem
• m-4 = 1rem
• m-6 = 1.5rem
• m-8 = 2rem
• و همین‌طور ادامه دارد…

این مقادیر در سایر کلاس‌های margin و padding هم همین‌طور اعمال می‌شوند.