با استفاده از خاصیت padding در CSS ، می توان فاصله بین خطوط حاشیه دور یک عنصر را با محتویات درونی آن تنظیم کرد . برای مثال فاصله بین خطوط حاشیه یک خانه جدول با متن درون آن را با استفاده از خاصیت padding تنظیم می کنیم .
نکته : در خاصیت padding استفاده از مقادیر منفی مجاز نیست .

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

 

۱ ) تعیین با استفاده از خاصیت چند مقداری padding :

توسط خاصیت padding طبق الگوی زیر ، میزان فاصله را برای تمام جهات تنظیم می کنیم :

padding : [ padding top ] [ padding right ] [ padding bottom ] [ padding left ]

مثال : در مثال زیر میزان فاصله درونی را برای جهت های بالا و پایین ۱۰px و برای جهت های راست و چپ ۲۰px تعیین کرده ایم :

padding : 10px 20px 10px 20px

۲ ) تعیین به صورت خاصیت تک مقداری :

در این حالت ، میزان فاصله را برای هر یک از جهات به صورت جدا مقدار دهی می کنیم . مجموعه خواص زیر برای تعیین تکی فاصله درونی به کار می رود :

padding-top:میزان فاصله درونی را در طرف بالای عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گیریم

padding-right:میزان فاصله درونی را در طرف راست عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گیریم .

padding-bottom:میزان فاصله درونی را در پایین عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل ارتفاع عنصر را به عنوان فاصله درونی در نظر می گیریم .

padding-left:میزان فاصله درونی را در طرف چپ عنصر تعیین می کند ، که به یکی از حالت های زیر می تواند مقدار دهی شود :
– length : در این حالت میزان فاصله درونی را بر حسب واحدی مثل پیکسل ( px ) یا نقطه ( pt ) تعیین می کنیم .
– درصد % : توسط این حالت به میزان درصد تعیین شده ، از کل عرض عنصر را به عنوان فاصله درونی در نظر می گیریم .

 

مثال : در مثال زیر هم به صورت خاصیت چند مقداری و هم به صورت خاصیت تک مقداری padding برای جدول مثال تعیین کرده ایم . به فاصله محتویات خانه های جدول با خطوط حاشیه آنها  مثال دقت کنید :
نکته مهم : در جدول مثال ، برای خانه Cell 3 فاصله درونی تعریف نکرده ایم ،   ولی برای خانه های cell 1 و Cell 2 در درون تگ td آنها ، padding را تعیین کرده ایم .

< table style=”border: solid 2px blue” cellspacing=”0″ >
< tr >
< td style=”border: solid 2px green; padding: 2px 10px 2px 10px; width: 200px” >
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
< /td >
< td style=”border: dashed 2px blue; padding: 10px 20px 30px 40px; width: 200px” >
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
< /td >
< td style=”border: solid 2px red; width: 200px” >
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
< /td >
< /tr >
< /table >

 

 

< table style=”border: solid 2px blue” cellspacing=”0″ >
< tr >
< td style=”border: solid 2px green; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; width: 200px” >
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
< /td >
< td style=”border: dashed 2px blue; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-bottom: 40px; width: 200px” >
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
< /td >
< td style=”border: solid 2px red; width: 200px” >
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
< /td >
< /tr >
< /table >