حاشیه داخلی CSS

فضای داخلی این عنصر 70px است.

حاشیه داخلی CSS

CSS padding این ویژگی برای ایجاد فضایی در اطراف محتوای عنصر در هر مرزی استفاده می‌شود.

با استفاده از CSS، می‌توانید فضای داخلی (پرکننده) را به طور کامل کنترل کنید. برخی از ویژگی‌ها می‌توانند فضای داخلی هر سمت (بالای، سمت راست، پایین و سمت چپ) عنصر را تنظیم کنند.

Padding - برای سمت‌های جداگانه

CSS دارای ویژگی‌هایی برای تنظیم فضای داخلی هر سمت عنصر است:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

تمام ویژگی‌های فضای داخلی می‌توانند مقادیر زیر را تنظیم کنند:

  • length - برای مشخص کردن فضای داخلی با استفاده از واحد‌های px، pt، cm و غیره
  • % - برای مشخص کردن فضای داخلی به عنوان درصد از عرض عنصر استفاده شود
  • inherit - برای مشخص کردن اینکه فضای داخلی باید از عنصر والد ارث‌برداری کند

توضیح:ممنوع است که از مقادیر منفی استفاده شود.

مثال

برای تنظیم فضای داخلی در هر چهار گوشه <div>،

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

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

Padding - ویژگی کوتاه‌شده

برای کاهش کد، می‌توان تمام ویژگی‌های فضای داخلی را در یک ویژگی مشخص کرد.

padding ویژگی یک کوتاه‌نویسی برای تمام این فضاهای داخلی است:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

مکانیزم کار این است که:

اگر padding ویژگی دارای چهار مقدار است:

  • padding: 25px 50px 75px 100px;
    • فضای داخلی بالا 25px است
    • فضای داخلی راست 50px است
    • فضای داخلی پایین 75px است
    • فضای داخلی چپ 100px است

مثال

با استفاده از ویژگی کوتاه padding با چهار مقدار تنظیم شده:

div {
  padding: 25px 50px 75px 100px;
}

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

اگر padding ویژگی با سه مقدار تنظیم شده:

  • padding: 25px 50px 75px;
    • فضای داخلی بالا 25px است
    • فضای داخلی راست و چپ 50px هستند
    • فضای داخلی پایین 75px است

مثال

با استفاده از ویژگی کوتاه padding با سه مقدار تنظیم شده:

div {
  padding: 25px 50px 75px;
}

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

اگر padding ویژگی با دو مقدار تنظیم شده:

  • padding: 25px 50px;
    • فضای داخلی بالا و پایین 25px هستند
    • فضای داخلی راست و چپ 50px هستند

مثال

با استفاده از ویژگی کوتاه padding با دو مقدار تنظیم شده:

div {
  padding: 25px 50px;
}

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

اگر padding ویژگی با یک مقدار تنظیم شده:

  • padding: 25px;
    • تمام چهار فضای داخلی 25px هستند

مثال

با استفاده از ویژگی کوتاه padding با یک مقدار تنظیم شده:

div {
  padding: 25px;
}

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

فضای داخلی و عرض عنصر

CSS width ویژگی مشخص می‌کند که عرض محدوده محتوای عنصر (مدل پنجره) چیست. محدوده محتوای عنصر شامل فضای داخلی، لبه و فضای اطراف عنصر است.

بنابراین، اگر عنصری عرض مشخصی دارد، اضافه کردن فضای داخلی به آن باعث می‌شود که عرض کل عنصر افزایش یابد. این معمولاً نتیجه ناخواسته‌ای است.

مثال

در اینجا، عرض عنصر <div> 300px است. اما، عرض واقعی عنصر <div> 350px خواهد بود (300px + پرکننده چپ 25px + پرکننده راست 25px):

div {
  width: 300px;
  padding: 25px;
}

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

برای حفظ عرض به 300px، بدون توجه به پرکننده‌ها، می‌توانید از box-sizing ویژگی. این باعث می‌شود که عنصر عرض خود را حفظ کند. اگر فضای داخلی اضافه شود، فضای موجود برای محتوای قابل استفاده کاهش می‌یابد.

مثال

با استفاده از ویژگی box-sizing، عرض را به 300px حفظ کنید، بدون توجه به پرکننده‌ها:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

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

مثال‌های بیشتر

تنظیم فضای داخلی چپ
این مثال نحوه تنظیم فضای داخلی چپ عنصر <p> را نشان می‌دهد.
تنظیم فضای داخلی راست
این مثال نحوه تنظیم فضای داخلی راست عنصر <p> را نشان می‌دهد.
تنظیم فضای داخلی بالا
این مثال نحوه تنظیم فضای داخلی بالا عنصر <p> را نشان می‌دهد.
تنظیم فضای داخلی پایین
این مثال نحوه تنظیم فضای داخلی پایین عنصر <p> را نشان می‌دهد.

تمام ویژگی‌های فضای داخلی CSS

ویژگی توضیح
padding ویژگی کوتاه برای تنظیم تمام ویژگی‌های فضای داخلی در یک جمله.
padding-bottom تنظیم فضای داخلی پایین عنصر.
padding-left تنظیم فضای داخلی چپ عنصر.
padding-right تنظیم پدینگ سمت راست عنصر.
padding-top تنظیم پدینگ بالای عنصر.

خواندن بیشتر

کتاب خارجی:مدل جعبه: پدینگ داخلی CSS