آموزش Padding یا فاصله درونی در CSS

از padding برای ایجاد فاصله(فضا) به دور محتوای یک عنصر در درون کادرها(borders) استفاده می شود.

div {
  padding: 70px;
  border: 1px solid #4CAF50;
}

padding در CSS

از ویژگی های padding برای تولید فضا به دور محتوای یک عنصر، درون هر کادر تعریف شده ای، استفاده می شود. ما با استفاده از CSS، کنترل کاملی روی padding ها داریم. برای تنظیم padding برای هر طرف از عنصر، (top و right و bottom و left) ویژگی های خاصی وجود دارند.

ویژگی های padding برای چهار طرف عنصر

CSS برای مشخص کردن padding برای چهار طرف یک عنصر، چند ویژگی زیر را دارد:

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

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

• طول: مقدار padding را به واحد px یا pt یا cm یا غیره مشخص می کند.
• % : یک padding را با درصدی از عرض(width) عنصر دربردارنده خود مشخص می کند.
• inherit : مشخص می کند که padding باید از  عنصر والد خود به ارث برده شود.

نکته: استفاده از مقادیر منفی مجاز نیست.

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

ویژگی خلاصه شده ی padding

اگر بخواهیم کدهای خود را کوتاه تر کنیم، این امکان وجود دارد که تمام تمام ویژگی های padding را در داخل یک دستور padding قرار دهیم. ویژگی padding یک ویژگی خلاصه شده برای ویژگی های فردی زیر می باشد:

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

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

padding: 25px 50px 75px 100px; 

1. top padding برابر با 25px است.
2. right padding برابر با 50px است.
3. bottom padding برابر با 75px است.
4. left padding برابر با 100px است.

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

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

padding: 25px 50px 75px;

1. top padding برابر با 25px است.
2. padding های right و left برابر با 50px هستند.
3. bottom padding برابر با 75px است.

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

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

padding: 25px 50px;

1. paddingهای top و bottom برابر با 25px هستند.
2. paddingهای right و left برابر با 50px هستند.

div {
  padding: 25px 50px;
}

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

padding: 25px;

1. هر چهار مقدار padding برابر با 25px هستند. 

div {
  padding: 25px;
}

ارتباط padding و عرضِ(Width) عنصر

ویژگی width در CSS، عرض ناحیه ی محتوایِ(content area) عنصر را مشخص می کند. ناحیه ی محتوا، به بخش درونیِ padding و کادر(border) و مارجین(margin) یک عنصر گفته می شود(مدل جعبه ای). بنابراین، اگر یک عنصر، یک عرض مشخص داشته باشد، padding اضافه شده به آن عنصر، به عرضِ کلّیِ آن عنصر، اضافه می شود. این موضوع، اغلب یک نتیجه ی ناخواسته و نامطلوب می باشد.

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

برای اینکه عرض را برابر با 300px تنظیم کنیم، مقدار padding مهم نیست؛ چون می توانیم از ویژگی box-sizing استفاده کنیم. این کار باعث می شود تا عنصر مورد نظر عرض اصلی خود را به دست آورد. اگر ما padding را افزایش دهیم، فضایِ محتوا(content space) کاهش می یابد.

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

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

تنظیم padding-right

این مثال، نشان می دهد که چگونه می توانیم padding-right را روی یک عنصر <p> تنظیم کنیم.

تنظیم padding-left

این مثال نشان می دهد که چگونه می توانیم padding-left را بر روی یک عنصر <p> تنظیم کنیم.

تنظیم padding-top
این مثال نشان می دهد که چگونه می توانیم padding-top را بر روی یک عنصر <p> تنظیم کنیم.

تنظیم padding-bottom

این مثال نشان می دهد که چگونه می توانیم padding-bottom را بر روی یک عنصر <p> تنظیم کنیم.