آموزش CSS - خواص مقدماتی ( حاشيه درونی عناصر CSS )

موقعیت:

دنیای فناوری با حساس کامپیوتر

آموزش برنامه نویسی

آموزش HTML و 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 برای جدول مثال تعيين کرده ايم . به فاصله محتويات خانه های جدول با خطوط حاشيه آنها  مثال دقت کنيد :
نکته مهم : در جدول مثال ، برای خانه Cell 3 فاصله درونی تعريف نکرده ايم ،   ولی برای خانه های cell 1 و Cell 2 در درون تگ td آنها ، padding را تعيين کرده ايم .