مدل جعبه‌ای: پادینگ CSS

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

ویژگی padding CSS فضای داخلی بین لبه‌های عنصر و محتوای آن را تعریف می‌کند. ویژگی padding مقدار طول یا مقدار درصدی را می‌پذیرد، اما نمی‌توان از مقدار منفی استفاده کرد.

ویژگی padding CSS

ویژگی padding CSS فضای داخلی عناصر را تعریف می‌کند. ویژگی padding مقدار طول یا مقدار درصدی را می‌پذیرد، اما نمی‌توان از مقدار منفی استفاده کرد.

مثلاً اگر بخواهید که تمام فضای داخلی‌های عنصر h1 ۱۰ پیکسل باشد، فقط باید این‌گونه باشد:

h1 {padding: 10px;}

شما همچنین می‌توانید به ترتیب بالا، راست، پایین و چپ فضای داخلی هر طرف را به ترتیب تنظیم کنید، و هر طرف می‌تواند از واحدهای مختلف یا مقدار درصدی استفاده کند:

h1 {padding: 10px 0.25em 2ex 20%;}

ویژگی‌های فضای داخلی تک‌طرفه

همچنین می‌توان با استفاده از چهار ویژگی جداگانه، فضای داخلی بالا، راست، پایین و چپ را تنظیم کرد:

شاید فکر کنید که قوانین زیر تأثیری مشابه قوانین کوتاه‌نویسی بالا دارند:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

مقدار درصدی فضای داخلی

همانطور که قبلاً ذکر شد، می‌توان برای فضای داخلی عنصر مقدار درصدی تنظیم کرد. مقدار درصدی به نسبت عرض عنصر پدر محاسبه می‌شود، که مانند حاشیه است. بنابراین، اگر عرض عنصر پدر تغییر کند، آن‌ها نیز تغییر می‌کنند.

این قوانین، فضای داخلی پاراگراف را به ۱۰٪ عرض عنصر پدر تنظیم می‌کند:

p {padding: 10%;}

مثلاً: اگر عنصر پدر یک پاراگراف div باشد، فضای داخلی آن باید بر اساس عرض div محاسبه شود.

<div style="width: 200px;">
<p>این پاراگراف در یک DIV قرار دارد که عرض آن ۲۰۰ پیکسل است.</p>
</div>

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

مثال CSS فضای داخلی:

تمام ویژگی‌های فضای داخلی در یک بیان
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از ویژگی کوتاه‌نویسی، تمام ویژگی‌های فضای داخلی را در یک بیان تنظیم کرد، که می‌تواند یک تا چهار مقدار داشته باشد.
فضای داخلی پایین 1 تنظیم شود
این مثال نشان می‌دهد که چگونه می‌توان از واحد سانتی‌متر برای تنظیم فضای داخلی پایین سلول استفاده کرد.
فضای داخلی پایین 2 تنظیم شود
این مثال نشان می‌دهد که چگونه می‌توان از نسبت درصد برای تنظیم فضای داخلی پایین سلول استفاده کرد.
فضای داخلی چپ 1 تنظیم شود
این مثال نشان می‌دهد که چگونه می‌توان از واحد سانتی‌متر برای تنظیم فضای داخلی چپ سلول استفاده کرد.
فضای داخلی چپ 2 تنظیم شود
این مثال نشان می‌دهد که چگونه می‌توان از نسبت درصد برای تنظیم فضای داخلی چپ سلول استفاده کرد.
تنظیم حاشیه داخلی راست 1
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقادیر سانتی‌متر حاشیه داخلی راست سلول را تنظیم کرد.
تنظیم حاشیه داخلی راست 2
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقادیر درصدی حاشیه داخلی راست سلول را تنظیم کرد.
تنظیم حاشیه داخلی بالا 1
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقادیر سانتی‌متر حاشیه داخلی بالا سلول را تنظیم کرد.
تنظیم حاشیه داخلی بالا 2
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقادیر درصدی حاشیه داخلی بالا سلول را تنظیم کرد.

ویژگی حاشیه داخلی CSS

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