صفات Padding در CSS

مقدار صفت padding برای عنصری که در زیر آورده شده است 70 پیکسل است : 

صفت  padding در CSS

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

فضایی که توسط صفت padding ایجاد میشود بین محتوای یک عنصر و خط دور(border) آن عنصر قرار دارد.

با استفاده از CSS شما کنترل کاملی نسبت به صفت padding در عناصر مختلف خواهید داشت. صفات مختلفی در CSS وجود دارد که با استفاده از آنها میتوان مقدار صفت padding را برای هر سمت از یک عنصر تعیین کرد(بالا، راست، پایین و چپ).

Padding - تنظیم مقدار صفت padding برای هر سمت به طور جداگانه

زبان CSS دارای صفاتی است که میتوان مقدار padding را برای هر سمت از یک عنصر HTML تنظیم کرد. این صفات عبارت اند از :

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

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

• اندازه - در این حالت مقدار صفات padding توسط اندازه هایی در واحد های پیکسل، سانتیمتر و ... مشخص میشود. 
• % - در این حالت مقدار padding با استفاده از درصدی از پهنای عنصر مورد نظر مشخص میشود.
• inherit - مقداردهی صفات padding با مقدار inherit به معنای این است که مقدار padding از عنصر پدرش به ارث برده میشود.

در نمونه مثال زیر مقدار padding برای هر چهار سمت یک عنصر پاراگراف مقدار دهی شده است :

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

Padding - صفت کوتاه شده

برای کوتاه نویسی در کد میتوان تمام صفات padding را که در لیست زیر آورده شده است در یک صفت خلاصه نویسی کرد :

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

p {
    padding: 50px 30px 50px 80px;
}

 و اما مثال بالا چطور کار میکند :

اگر صفت padding دارای چهار مقدار باشد :

padding: 25px 50px 75px 100px;

• padding بالایی دارای مقدار 25 پیکسل است
• padding سمت راست دارای مقدار 50 پیکسل است
• padding پایینی دارای مقدار 75 پیکسل است
• padding سمت چپ دارای مقدار 100 پیکسل است

اگر صفت padding دارای سه مقدار باشد : 

padding: 25px 50px 75px;

• padding بالایی دارای مقدار 25 پیکسل است
• padding های سمت راست و چپ دارای مقادیر 50 پیکسل هستند
• padding پایینی دارای مقدار 75 پیکسل است

اگر صفت padding دارای دو مقدار باشد : 

padding: 25px 50px;

• padding های بالا و پایین دارای مقدار 25 پیکسل هستند
• padding های سمت راست و چپ دارای مقدار 50 پیکسل هستند

اگر صفت padding دارای یک مقدار باشد :

padding: 25px;

•  هر چهار padding دارای مقدار 25 پیکسل هستند

در نمونه مثال زیر نحوه ی استفاده از هر چهار روش نشان داده شده است :

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

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

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}

تمام صفات padding در CSS