تعریف

ویژگی Padding در CSS برای تعیین فاصله‌ی داخلی (Inner Space) بین محتوای عنصر و مرز (Border) استفاده می‌شود.

به عبارت ساده:

• Padding = فاصله‌ی داخل جعبه (از متن یا محتوا تا Border).

• Margin = فاصله‌ی بیرونی جعبه (از Border تا محیط اطراف).

✨ نحوه مقداردهی Padding

ویژگی padding مثل Margin می‌تواند یک، دو، سه یا چهار مقدار بگیرد:

1. یک مقدار (برای همه طرف‌ها)

div {
  padding: 20px;  /* بالا، راست، پایین، چپ */
}

2. دو مقدار (بالا/پایین – راست/چپ)

div {
  padding: 10px 30px;  /* بالا/پایین: 10px - راست/چپ: 30px */
}

3. سه مقدار

div {
  padding: 5px 15px 25px;
  /* بالا: 5px - راست/چپ: 15px - پایین: 25px */
}

4. چهار مقدار

div {
  padding: 10px 20px 30px 40px;
  /* بالا:10 - راست:20 - پایین:30 - چپ:40 */
}

✨ ویژگی‌های خاص

🔹 padding-top

فاصله داخلی بالای عنصر.

p {
  padding-top: 20px;
}

🔹 padding-right

فاصله داخلی سمت راست.

p {
  padding-right: 15px;
}

🔹 padding-bottom

فاصله داخلی پایین عنصر.

p {
  padding-bottom: 25px;
}

🔹 padding-left

فاصله داخلی سمت چپ.

p {
  padding-left: 40px;
}

✨ تفاوت مهم: Margin vs Padding

📌 نکته: Box-sizing و Padding

به طور پیش‌فرض (با box-sizing: content-box)، وقتی به یک عنصر padding اضافه می‌کنیم، به ابعاد کلی جعبه هم اضافه می‌شود.
ولی اگر box-sizing: border-box ست بشه، Padding داخل محاسبات width/height لحاظ می‌شود.

مثال:

div {
  width: 200px;
  padding: 20px;
  box-sizing: border-box; /* padding در عرض محاسبه می‌شود */
}