در حال بارگذاری...

فاصلهٔ داخلی (Padding) در CSS

Margin جعبه‌ها را از هم جدا می‌کند. خیلی وقت‌ها داخل جعبه هم جا لازم است — تا متن به حاشیه نچسبد و دکمه راحت لمس شود. این کوسن داخلی padding است.

padding چیست؟

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

Padding در برابر margin یک‌نگاهه

این دو را راحت قاطی می‌کنند. کارها را جدا نگه دارید.

📊 Padding در برابر margin

ابزار کجا می‌نشیند کار روزمره
padding داخل حاشیه کوسن متن، بزرگ کردن ناحیهٔ کلیک
margin بیرون حاشیه جدا کردن این جعبه از همسایه‌ها
پس‌زمینه معمولاً padding را پر می‌کند رنگ/عکس اغلب کوسن را هم می‌پوشاند
جمع شدن عمودی Padding جمع نمی‌شود Margin بین بلوک‌های روی هم ممکن است

padding یکسان روی هر ضلع

با یک طول برای کارت آرام شروع کنید.

padding یکسان روی همهٔ اضلاع

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* فاصلهٔ بیرونی — ابزار دیگر */
}

چه چیزی را باید ببینید؟

متن از حاشیهٔ خاکستری فاصله دارد. پس‌زمینهٔ سفید ناحیهٔ padding را هم پر می‌کند — نه فقط حروف را.

دو مقدار — عمودی، بعد افقی

دو طول اضلاع روبه‌رو را جفت می‌کند: اولی بالا و پایین؛ دومی چپ و راست.

padding عمودی بعد افقی

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

چهار مقدار — ساعت‌گرد از بالا

وقتی هر ضلع کوسن خودش را می‌خواهد: بالا → راست → پایین → چپ.

میان‌بر چهارضلعی padding

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

دکمه‌ها عاشق paddingاند

Padding ناحیهٔ راحت ضربه را بزرگ می‌کند بدون اینکه اندازهٔ متن برچسب عوض شود. برچسب کوتاه با padding سخاوتمند، امروزی و آسان برای کلیک حس می‌شود.

دکمه با padding

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

پس‌زمینه padding را پر می‌کند

برخلاف margin (بیرون)، padding هنوز بخشی از جعبهٔ رنگ‌شدهٔ عنصر است. رنگ یا تصویر پس‌زمینه معمولاً ناحیهٔ padding را هم می‌پوشاند.

ناحیهٔ رنگی padding

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

خودتان امتحان کنید

  1. کارت با padding: 16px و حاشیهٔ دیدنی — ببینید متن به لبه نچسبیده.
  2. همان را padding: 20px 12px بنویسید و کوسن بلندتر در برابر پهن‌تر را حس کنید.
  3. دکمه با padding افقی بیشتر از عمودی.
  4. بنر فیروزه‌ای با padding بزرگ و حاشیهٔ تیره‌تر — ببینید رنگ کوسن را پر می‌کند.
  5. دو کارت فقط با margin بینشان، بعد فقط padding داخل یکی — فرق کار دو ابزار را حس کنید.

اشتباهات رایج

  • استفاده از padding برای جدا کردن جعبه‌ها (آن کار margin است)
  • انتظار اینکه padding بین هم‌سطح‌ها مثل margin عمودی جمع شود (نمی‌شود)
  • فراموش کردن که پس‌زمینه معمولاً از ناحیهٔ padding هم رد می‌شود
  • padding غول‌پیکر روی هر ضلع وقتی مقیاس معتدل تمیزتر است
  • قاطی کردن ترتیب چهار مقدار (بالا، راست، پایین، چپ)

خلاصه

  • Padding فضای داخلی بین محتوا و حاشیه است
  • میان‌بر: ۱، ۲ یا ۴ مقدار (چهارتایی ساعت‌گرد از بالا)
  • پس‌زمینه معمولاً ناحیهٔ padding را پر می‌کند
  • Padding برخلاف margin عمودی جمع نمی‌شود
  • دکمه و کارت برای راحتی به padding تکیه می‌کنند
  • Margin عموزادهٔ بیرونی می‌ماند — هر دو ابزار را تیز نگه دارید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش