باسلام خدمت شما دوستان عزیز امروز خاصیت padding در CSS,را توضیح میدم.درواقع  فاصله ی بین خطوط حاشیه ی عنصر و محتوای عنصر را تعریف می کند (در واقع با استفاده از خاصیت ذکر شده می توان فاصله ی بین خط حاشیه border و محتوای داخل عنصر مربوطه را تنظیم کرد) .
Padding (فاصله / حاشیه ی درونی عناصر)

Paddingناحیه ی پیرامون محتوای یک المان را دربر می گیرد. توجه داشته باشید که حاشیه ی درونی عناصر تحت تاثیر رنگ پس زمینه قرار می گیرد .

Paddingهر چهار جهت بالا, پایین, چپ و راست را می توان به صورت جداگانه به وسیله ی خواص (property) مجزا تنظیم کرد یا تغییر داد . همچنین می توان با بهره گیری از خاصیت مختصر نویسی (shorthand property), حاشیه ی درونی عناصر (padding) هر چهار جهت را یکجا تنظیم کرد .

مقادیر ممکن
شرح
مقدار
فاصله ی درونی عنصر / padding را می توان بر حسب واحدی همچون px, pt, em و غیره تعیین کرد
Length
به میزان درصد تعریف شده فاصله ی درونی عنصر را تعیین کرد
%
تنظیم فاصله ی درونی عنصر به صورت تکی برای هر جهت :

در CSS این امکان وجود دارد که فاصله ی درونی چهار جهت را به صورت تکی یا مجزا مقدار دهی کرد (برای هر طرف padding متفاوتی تنظیم کرد) :
آموزش Css مثال:
?
۱
۲
۳
۴
۵
۶

p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
تعیین با استفاده از خاصیت چند مقداری padding :

به منظور بهینه سازی کدنویسی و کاهش مقدار کدی که می نویسیم می توان خاصیت padding (میزان فاصله ی دور عنصر) هر چهار جهت را در یک تعریف مقداردهی و تنظیم کرد . همان طور که پیش تر نیز ذکر شد به این روش مقداردهی shorthand property یا خاصیت مختصر نویسی می گویند (که می توان آن را خاصیت چند مقداری نیز نامید) .
آموزش Css مثال:
?
۱
۲
۳

p {
padding: 25px 50px;
}

خاصیت padding می تواند از یک تا چهار مقدار داشته باشد :
?
۱
۲
۳
۴
۵

padding: 25px 50px 75px 100px;
top padding = 25px
right padding = 50px
bottom padding = 75px
left padding = 100px
?
۱
۲
۳
۴

padding: 25px 50px 75px;
top padding = 25px
right and left paddings = 50px
bottom padding = 75px
?
۱
۲
۳

padding: 25px 50px;
top and bottom paddings = 25px
right and left paddings = 50px
?
۱
۲

padding: 25px;
all four paddings = 25px
شرح
خاصیت
کلیه ی خاصیت های padding در هر چهار جهت را با بهره گیری از خاصیت shorthand در تنها یک تعریف مقدار دهی می کند
Padding
Padding سمت پایین را تنظیم می کند
padding-bottom
padding سمت چپ را مقداردهی می کند
padding-left
padding سمت راست یک عنصر را تنظیم و مقدار دهی می کند
padding-right
حاشیه درونی عنصر را در سمت بالا تنظیم می کند
padding-top