قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / حاشيه درونی عناصر css

حاشيه درونی عناصر css

حاشيه درونی عناصر cssReviewed by سالار on Mar 31Rating: 5.0

حاشيه درونی عناصر :

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

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

padding
padding-top
padding-right
paddnig-bottom
padding-left

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

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

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

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

padding : 10px 20px 10px 20px

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

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

نام خاصيت نوع خاصيت شرح
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
خروجی

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید