Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

خاصیت padding در CSS

شما با استفاده از خاصیت padding در CSS می توانید به باکس (بلاک یا تگ) خود فاصله ای تا متن اضافه کنید. این خاصیت بسیار به کار برده می شود ولی ایراداتی هم دارد. برای مثال ممکن است اگر تازه کار باشید برای استفاده از این خاصیت دچار مشکل شوید و صفحه ای که طراحی می کنید از اندازه های نا مناسب در آید.

توجه کنید که padding یک لایه اضافه می کند که به width باکس اضافه می کند نه این که width را کمتر کند. این اشتباه بسیاری از کدنویس های جوان است!


مکان padding در باکس

برای تعیین مکان padding می توانید به زیر نگاه کنید. توجه داشته باشید که دور padding یک کادر وجود دارد که همان Border می باشد. بر خلاف margin ، این خاصیت داخل border می باشد در حالی که margin بیرون از border می باشد.



width
padding

مقادیر padding

در padding کلی شما می توانید چهار خاصیت padding-top , padding-right , padding-bottom , padding-left را جا دهید و همگی آنها را با هم استفاده کنید. برای استفاده از آن می بایست ترتیب قرار گیری آن را یاد بگیرید:

padding: padding-top padding-right padding-bottom padding-left ;

هر کدام از مقدار ها:

این مقدار ها هر کدام می تواند یکی از این گزینه ها باشد:

  • عدد + واحد : برای مثال 15px یا 10% یا 5em و ...
  • inherit : هیچ (بدون padding)

خلاصه نویسی:

شما در استفاده از padding کلی می توانید خلاصه بنویسید. به این صورت که دو قسمت را حذف می کنید و قسمت بالا و پایین را با یک عدد و قسمت چپ و راست را با یک عدد دیگر نشان دهید. ترتیب اینگونه می باشد:

padding: padding-top&bottom    padding-left&right ;


شما می توانید با گذاشتن فقط یک گزینه در padding کلی تمام padding ها را به همان اندازه در آورید. برای مثال اگر padding:15px باشد تمام چهار padding به اندازه 15 پیکسل از همه طرف فاضله خواهند داشت. به این صورت:

padding: padding-top&bottom&left&right ;


توجه کنید که padding یک لایه مانند width و margin می باشد و با آنها تداخلی ندارد. برای مثال اگر شما چنین استایلی را برای یک باکس داشته باشید... :

width:100px;
margin:10px;
padding:5px;

... یک باکس با 115 پیکسل خواهید داشت نه یک باکس با 110 پیکسل!

نا مطلع ها فکر می کنند که padding پنج پیکسل از Width کم می کند و جای اون 5 پیکسل می نشیند ، در حالی که 5 پیکسل به آن اضافه می کند (بهتر گفته بشه یک لایه 5 پیکسلی به عرض و ارتفاع اضافه می کند).

باشه فلوط رو اموزش بده
راست می گی اگه کسی اون رو بلد نباشه نمی تونه کلر رو هم یاد بگیره
مرسی
ممنونم
از سرعت عمل وتایید فوری نظر هم خیلی ذوق زده شدم)دی
اقا محمد ادامه بده لطفا بی صبرانه منتظریم به خدا
سه روزه بروز نکردی این اموزش رو
ما هم دل داریم
http://moisrex.rozblog.com/images/smilies/smile%20(9).gif
لطفا توی اموزش بعد ی
clear
کلر
امید وارم درست تایپش کرده باشم
رو اموزش بده مرسی
پاسخ : باشه چشم همین الآن آموزش می دم.
ولی اول float رو آموزش میدم تا موقع یاد گرفتن clear مشکلی نداشته باشین.
با تشکر
بابا اینارو ول کن یه ابزار بساز

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36612
افراد آنلاین : 4
بازدید امروز : 972
بازدید دیروز : 1,060
گوگل امروز : 71
گوگل دیروز : 127
بازدید هفته : 5,625
بازدید ماه : 27,981
بازدید سال : 373,580
بازدید کلی : 10,768,056