آموزش سی اس اس CSS

پراپرتی padding برای فضا در اطراف محتوای المان استفاده میشود. این حاشیه داخل بوردرهای تعریف شده اطراف آن المان است.

با سی اس اس شما کنترل کاملی بر روی این فضا ها دارید. برای ایجاد فضا در اطراف هر سمت از المان پراپرتی وجود دارد.

Padding - برای هر سمت

برای ایجاد فضا در اطراف هر سمت از المان پراپرتی وجود دارد.

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

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

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

نکاتی که باید در ذهن داشته باشید

مقادیر منفی قابل قبول نمیباشد.

 
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 سه مقدار داشته باشد:

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

اگر پراپرتی padding دو مقدار داشته باشد:

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

اگر پراپرتی padding یک مقدار داشته باشد:

• padding: 25px;
  • همه فضاها 25px میباشد

Padding و Width المان

پراپرتی width اندازه ناحیه محتوای المان را مشخص میکند. ناحیه محتوا همان بخشی است که درون padding، border، و margin المان است.

مطالعه بیشتر: the box model

بنابراین، اگر برای المانی عرض تعریف کرده باشید، padding تعریف شده برای المان، به عرض نهایی آن المان اضافه میشود. این پدیده اغلب منجر به نتایج ناخواسته میشود.

در مثال زیر، برای المان div عرض 300px درنظر گرفته شده است. اما عرض رندر شده آن 350px است. (300px + 25px پدینگ سمت چپ + 25px پدینگ سمت راست):

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

برای اینکه عرض شما همان 300px بماند و پدینگ المان بر روی عرض نهایی تاثیر نامطلوب نگذارد میتوانید ار پراپرتی box-sizing استفاده کنید. این پراپرتی باعث میشود عرضی که تعریف کرده اید ثابت بماند؛ اگر شما پدینگ المان را زیاد کنید، فضای خالی اطراف محتوا کاهش پیدا میکند.

مثال