خواص مقدماتی CSS
حاشيه درونی عناصر :
با استفاده از خاصيت padding در CSS ، می توان فاصله بين خطوط حاشيه دور يک عنصر را
با محتويات درونی آن تنظيم کرد . برای مثال فاصله بين خطوط حاشيه يک خانه جدول با متن
درون آن را با استفاده از خاصيت padding تنظيم می کنيم .
نکته : در خاصيت padding استفاده از مقادير منفی مجاز نيست
.
فاصله درونی عناصر در 4 جهت بالا ، راست ، پايين و چپ تعيين می شود ، که می توان با
استفاده از خاصيت چند مقداری padding آن را برای تمام جهات تنظيم کرده و يا به صورت
خاصيت تک مقداری ، ميزان فاصله را در هر جهت به صورت مجزا تعيين کرد .
مجموعه خواص padding شامل ليست زير می شود و برای دريافت اطلاعات درباره هر خاصيت روی
نام آن کليک کنيد :
1 ) تعيين با استفاده از خاصيت چند مقداری padding :
توسط خاصيت padding طبق الگوی زير ، ميزان فاصله را برای تمام جهات تنظيم می
کنيم :
padding : [ padding top ] [ padding right ] [
padding bottom ] [ padding left ]
مثال : در مثال زير ميزان فاصله درونی را برای جهت های بالا
و پايين 10px و برای جهت های راست و چپ 20px تعيين کرده ايم :
padding : 10px 20px 10px 20px
2 ) تعيين به صورت خاصيت تک مقداری :
در اين حالت ، ميزان فاصله را برای هر يک از جهات به صورت جدا مقدار دهی می کنيم .
مجموعه خواص زير برای تعيين تکی فاصله درونی به کار می رود :
|
نام خاصيت
|
نوع خاصيت |
شرح |
|
padding-top |
length
درصد %
|
ميزان فاصله درونی را در طرف بالای عنصر تعيين می کند ، که به يکی از حالت های زير
می تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه
( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان
فاصله درونی در نظر می گيريم .
|
|
padding-right |
length
درصد %
|
ميزان فاصله درونی را در طرف راست عنصر تعيين می کند ، که به يکی از حالت های زير می
تواند مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه
( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل عرض عنصر را به عنوان فاصله
درونی در نظر می گيريم .
|
|
padding-bottom |
length
درصد %
|
ميزان فاصله درونی را در پايين عنصر تعيين می کند ، که به يکی از حالت های زير می تواند
مقدار دهی شود :
- length : در اين حالت ميزان فاصله درونی را بر حسب واحدی مثل پيکسل ( px ) يا نقطه
( pt ) تعيين می کنيم .
- درصد % : توسط اين حالت به ميزان درصد تعيين شده ، از کل ارتفاع عنصر را به عنوان
فاصله درونی در نظر می گيريم .
|
|
padding-left |
length
درصد %
|
ميزان فاصله درونی را در طرف چپ عنصر تعيين می کند ، که به يکی از حالت های زير می
تواند مقدار دهی شود :
- 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 >
|
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
|
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
|
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
|
|
< 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 >
|
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
Cell 1 Cell 1 Cell 1
|
Cell 2 Cell 2 Cell 2
Cell 2 Cell 2 Cell 2
|
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
Cell 3 Cell 3 Cell 3 Cell 3
|
|